# /documentation:module - Génération Documentation SmartStack

> **Synergie Skill/Commande:**
> - **Skill** (`.claude/skills/documentation/`) → Invocation automatique par Claude
> - **Commande** (`/documentation:module`) → Invocation manuelle par l'utilisateur
> - Templates partagés dans `.claude/skills/documentation/templates.md`

---

## ARGUMENTS

```
/documentation:module <type> <target>
```

| Variable | Extraction | Valeurs |
|----------|------------|---------|
| `$TYPE` | Premier mot | `user` \| `developer` \| `database` \| `testing` |
| `$TARGET` | Reste de la ligne | Nom du module, outil, ou schéma |

---

## RÈGLES ABSOLUES

1. **JAMAIS** de texte en dur → `useTranslation('docs')`
2. **JAMAIS** d'ASCII art → composants React/HTML pour MCD
3. **TOUJOURS** lire les sources existantes avant de générer
4. **TOUJOURS** demander confirmation avant de créer les fichiers
5. **TOUJOURS** mettre à jour App.tsx et les index parents

---

## WORKFLOW

### ÉTAPE 1: PARSING DES ARGUMENTS

```
EXTRAIRE $TYPE = premier mot des arguments
EXTRAIRE $TARGET = reste des arguments

SI $TYPE absent OU non reconnu → AskUserQuestion
SI $TARGET absent → AskUserQuestion
```

### ÉTAPE 2: ANALYSE (selon $TYPE)

#### SI $TYPE == "user"

| Action | Commande |
|--------|----------|
| Trouver le module | `Grep "code.*$TARGET" src/.../Navigation/` |
| Composants React | `Glob "web/.../pages/**/*$TARGET*"` |
| Permissions | `Grep "$TARGET" src/.../Permissions.cs` |
| Endpoints API | `Grep "$TARGET" src/.../Controllers/` |

#### SI $TYPE == "database"

| Action | Commande |
|--------|----------|
| Tables du schéma | `Read ApplicationDbContextModelSnapshot.cs` |
| Configurations | `Glob "Persistence/Configurations/$TARGET/*.cs"` |
| Entités Domain | `Glob "Domain/Entities/$TARGET/*.cs"` |

#### SI $TYPE == "developer" ou "testing"

| Action | Commande |
|--------|----------|
| Doc existante | `Glob "pages/docs/developer/**/*$TARGET*"` |
| Fichiers config | `Glob "**/$TARGET*.{json,yaml}"` |
| Doc officielle | `WebSearch` |

### ÉTAPE 3: CONFIRMATION UTILISATEUR

```typescript
AskUserQuestion({
  questions: [{
    header: "Détail",
    question: "Quel niveau de détail pour '$TARGET' ?",
    options: [
      { label: "Complet (Recommended)", description: "Toutes sections" },
      { label: "Standard", description: "Sections principales" },
      { label: "Minimal", description: "Référence rapide" }
    ]
  }]
})
```

### ÉTAPE 4: GÉNÉRATION

| $TYPE | Fichier | Chemin |
|-------|---------|--------|
| `user` | `{Module}DocPage.tsx` | `pages/docs/user/{context}/` |
| `developer` | `{Tool}Page.tsx` | `pages/docs/developer/tools/` |
| `database` | `{Schema}SchemaPage.tsx` | `pages/docs/developer/database/` |
| `testing` | `{Tool}TestingPage.tsx` | `pages/docs/developer/testing/` |

**Fichiers à créer/modifier:**
1. Page React (utiliser template de `templates.md`)
2. Traductions EN → `i18n/locales/en/docs.json`
3. Traductions FR → `i18n/locales/fr/docs.json`
4. Route → `App.tsx`
5. Index parent → lien de navigation
6. **UserIndexPage.tsx** → Ajouter le module à la hiérarchie (SI $TYPE == "user")

### ÉTAPE 4bis: INTÉGRATION UserIndexPage (SI $TYPE == "user")

**OBLIGATOIRE** pour les modules utilisateur: Vérifier et mettre à jour `UserIndexPage.tsx`

```typescript
// Fichier: web/smartstack-web/src/pages/docs/user/UserIndexPage.tsx

// 1. Ajouter l'icône si nécessaire
import { ..., {IconName} } from 'lucide-react';

// 2. Trouver l'application parente dans la hiérarchie
//    - Platform > Administration: pour les modules admin
//    - Platform > Support: pour les modules support
//    - Personal > MySpace: pour les modules personnels

// 3. Ajouter le module dans le tableau `modules` de l'application:
{
  name: t('user.modules.{module}.name'),
  icon: {IconName},
  href: '/docs/user/{slug}',
  description: t('user.modules.{module}.description')
},

// 4. Ajouter les traductions dans docs.json (fr + en):
"modules": {
  "{module}": {
    "name": "Nom du module",
    "description": "Description courte"
  }
}
```

**Vérification:**
- Le module doit apparaître dans la page `/docs/user` sous son application parente
- Le lien doit pointer vers `/docs/user/{slug}`

### ÉTAPE 5: INTÉGRATION

```typescript
// App.tsx
import { {Name}DocPage } from '@/pages/docs/{path}/{Name}DocPage';
<Route path="{slug}" element={<{Name}DocPage />} />
```

### ÉTAPE 6: RÉSUMÉ FINAL

Afficher:
- ✅ Fichiers créés (chemins cliquables)
- 🔗 URL: `/docs/{path}/{slug}`
- 📝 Prochaines étapes

---

## TEMPLATES

→ **Voir `.claude/skills/documentation/templates.md`**

Templates disponibles:
- User Module (maquettes UI, FAQ, API)
- Database Schema (MCD HTML, tables détaillées)
- Developer Tool (installation, config, CI/CD)
- Patterns réutilisables (CodeBlock, Stats, Badges)

---

## SOURCES DE DONNÉES

| Donnée | Source |
|--------|--------|
| Tables DB | `ApplicationDbContextModelSnapshot.cs` |
| Configurations | `Persistence/Configurations/{schema}/*.cs` |
| Permissions | `Domain/Authorization/Permissions.cs` |
| Routes | `App.tsx` |
| Traductions | `i18n/locales/*/docs.json` |
| Doc outils | WebSearch |

---

## STRUCTURE i18n

```json
{
  "breadcrumb": { "documentation": "...", "user": "...", "developer": "..." },
  "common": { "tableOfContents": "...", "externalResources": "..." },
  "user": { "{module}": { "title": "...", "sections": {...} } },
  "developer": { "tools": {...}, "database": {...} }
}
```

---

## CONTRAINTES

- Variables CSS: `var(--text-primary)`, `var(--bg-secondary)`, `var(--color-primary-600)`
- Responsive: `grid-cols-1 md:grid-cols-2 lg:grid-cols-3`
- Icônes: `lucide-react` uniquement
- Liens externes: avec `<ExternalLink />` icon
- MCD: composants React/HTML (JAMAIS ASCII)
