# 🚀 Guide de Setup - Environnement de Développement WSL

Ce guide vous accompagne dans la configuration complète de l'environnement de développement pour le projet **BricoLoc Architecture Evolution**.

---

## 📋 Prérequis

### Système d'Exploitation

- ✅ **Windows 10/11** avec WSL 2 activé
- ✅ **Ubuntu 22.04 LTS** (ou version récente)

### Outils à Installer

| Outil | Version Minimale | Commande de Vérification |
|-------|------------------|--------------------------|
| **Node.js** | v20.x ou v22.x | `node --version` |
| **pnpm** | v9.x | `pnpm --version` |
| **Git** | 2.x | `git --version` |
| **VS Code** | Latest | `code --version` |

---

## 🛠️ Installation Pas-à-Pas

### Étape 1 : Vérifier WSL

```bash
# Dans PowerShell (Windows)
wsl --version

# Doit afficher WSL version 2.x
```

Si WSL n'est pas installé :
```powershell
# Dans PowerShell Admin
wsl --install -d Ubuntu-22.04
```

### Étape 2 : Installer Node.js (via nvm)

**Pourquoi nvm ?** Permet de gérer plusieurs versions de Node.js facilement.

```bash
# 1. Installer nvm
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.7/install.sh | bash

# 2. Recharger le shell
source ~/.bashrc

# 3. Vérifier l'installation
nvm --version

# 4. Installer Node.js LTS
nvm install --lts
nvm use --lts

# 5. Vérifier
node --version  # Doit afficher v22.x ou v20.x
npm --version
```

### Étape 3 : Installer pnpm

```bash
# Installer pnpm globalement
npm install -g pnpm@latest

# Vérifier
pnpm --version  # Doit afficher 9.x
```

**Configuration pnpm** (optionnel mais recommandé) :
```bash
# Configurer le store global
pnpm config set store-dir ~/.pnpm-store

# Activer le hoisting (pour Next.js)
pnpm config set shamefully-hoist true
```

### Étape 4 : Configurer Git

```bash
# Configuration de base
git config --global user.name "Votre Nom"
git config --global user.email "votre.email@example.com"

# Éditeur par défaut (VS Code)
git config --global core.editor "code --wait"

# Alias utiles
git config --global alias.st status
git config --global alias.co checkout
git config --global alias.br branch
git config --global alias.ci commit
git config --global alias.lg "log --oneline --graph --all"

# Vérifier la configuration
git config --list
```

### Étape 5 : Cloner le Projet

```bash
# Se placer dans le répertoire home
cd ~

# Cloner le projet (remplacer par votre URL si déjà sur GitHub)
git clone <URL_DU_REPO> bricoloc-architecture-evolution

# OU si vous démarrez localement :
mkdir -p ~/bricoloc-architecture-evolution
cd ~/bricoloc-architecture-evolution

# Initialiser Git
git init
git branch -M main
```

### Étape 6 : Installer les Dépendances

```bash
cd ~/bricoloc-architecture-evolution

# Installer les dépendances (une fois le package.json créé)
pnpm install
```

---

## 🔧 Configuration VS Code

### Extension Recommandées

Installer dans VS Code (depuis WSL) :

```bash
# Ouvrir VS Code depuis WSL
code .
```

**Extensions essentielles** :
```
ms-vscode-remote.remote-wsl          # WSL support
dbaeumer.vscode-eslint               # ESLint
esbenp.prettier-vscode               # Prettier
bradlc.vscode-tailwindcss            # Tailwind CSS IntelliSense
prisma.prisma                        # Prisma (si utilisé)
ms-playwright.playwright             # Playwright tests
orta.vscode-jest                     # Jest Runner
usernamehw.errorlens                 # Inline errors
eamodio.gitlens                      # Git enhanced
```

**Installation automatique** :
```bash
# Créer un fichier .vscode/extensions.json (à faire plus tard dans le projet)
# VS Code proposera d'installer les extensions recommandées
```

### Configuration VS Code (settings.json)

Créer `.vscode/settings.json` :
```json
{
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": "explicit",
    "source.organizeImports": "explicit"
  },
  "typescript.preferences.importModuleSpecifier": "non-relative",
  "typescript.tsdk": "node_modules/typescript/lib",
  "files.associations": {
    "*.css": "tailwindcss"
  },
  "tailwindCSS.experimental.classRegex": [
    ["cva\\(([^)]*)\\)", "[\"'`]([^\"'`]*).*?[\"'`]"],
    ["cx\\(([^)]*)\\)", "(?:'|\"|`)([^']*)(?:'|\"|`)"]
  ],
  "[typescript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[typescriptreact]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[json]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  }
}
```

---

## 📦 Configuration du Projet

### Étape 7 : Créer la Structure de Base

```bash
cd ~/bricoloc-architecture-evolution

# Créer les dossiers principaux (si pas déjà fait)
mkdir -p apps/legacy apps/moderne packages/microservices packages/shared tools

# Créer dossiers microservices
mkdir -p packages/microservices/{auth,catalogue,reservation,inventory,payment,notification}

# Créer dossiers shared
mkdir -p packages/shared/{types,ui,utils,di,events}

# Créer dossiers tools
mkdir -p tools/{scripts,configs}
```

### Étape 8 : Configuration pnpm Workspaces

**Créer `pnpm-workspace.yaml`** à la racine :
```yaml
packages:
  - 'apps/*'
  - 'packages/microservices/*'
  - 'packages/shared/*'
  - 'tools/*'
```

**Créer `package.json`** racine :
```json
{
  "name": "bricoloc-architecture-evolution",
  "version": "1.0.0",
  "description": "Projet d'architecture démontrant l'évolution de BricoLoc (Legacy → Moderne)",
  "private": true,
  "engines": {
    "node": ">=20.0.0",
    "pnpm": ">=9.0.0"
  },
  "packageManager": "pnpm@9.12.0",
  "scripts": {
    "dev:legacy": "pnpm --filter legacy dev",
    "dev:moderne": "pnpm --filter moderne dev",
    "dev:all": "pnpm --parallel --filter \"./apps/*\" dev",
    "build:legacy": "pnpm --filter legacy build",
    "build:moderne": "pnpm --filter moderne build",
    "build:all": "pnpm --recursive --filter \"./apps/*\" build",
    "lint": "pnpm --recursive lint",
    "test": "pnpm --recursive test",
    "type-check": "pnpm --recursive type-check",
    "clean": "pnpm --recursive clean && rm -rf node_modules"
  },
  "devDependencies": {
    "@types/node": "^22.7.5",
    "eslint": "^9.12.0",
    "prettier": "^3.3.3",
    "typescript": "^5.6.3"
  }
}
```

**Installer les dépendances** :
```bash
pnpm install
```

### Étape 9 : Configuration ESLint + Prettier

**Créer `.prettierrc.json`** à la racine :
```json
{
  "semi": false,
  "singleQuote": true,
  "tabWidth": 2,
  "trailingComma": "es5",
  "printWidth": 100,
  "arrowParens": "always",
  "endOfLine": "lf"
}
```

**Créer `.prettierignore`** :
```
node_modules
.next
dist
build
coverage
*.md
pnpm-lock.yaml
```

**Créer `eslint.config.mjs`** (ESLint 9 flat config) :
```javascript
import js from '@eslint/js'
import typescript from '@typescript-eslint/eslint-plugin'
import typescriptParser from '@typescript-eslint/parser'

export default [
  js.configs.recommended,
  {
    files: ['**/*.ts', '**/*.tsx'],
    languageOptions: {
      parser: typescriptParser,
      parserOptions: {
        ecmaVersion: 'latest',
        sourceType: 'module',
      },
    },
    plugins: {
      '@typescript-eslint': typescript,
    },
    rules: {
      '@typescript-eslint/no-unused-vars': ['error', { argsIgnorePattern: '^_' }],
      '@typescript-eslint/no-explicit-any': 'warn',
      'no-console': ['warn', { allow: ['warn', 'error'] }],
    },
  },
]
```

**Installer les dépendances ESLint** :
```bash
pnpm add -D -w @eslint/js @typescript-eslint/eslint-plugin @typescript-eslint/parser
```

### Étape 10 : Configuration TypeScript

**Créer `tsconfig.base.json`** à la racine :
```json
{
  "compilerOptions": {
    "target": "ES2022",
    "lib": ["ES2022"],
    "module": "ESNext",
    "moduleResolution": "bundler",
    "resolveJsonModule": true,
    "allowJs": true,
    "checkJs": false,
    "jsx": "preserve",
    "declaration": true,
    "declarationMap": true,
    "sourceMap": true,
    "outDir": "./dist",
    "removeComments": true,
    "esModuleInterop": true,
    "forceConsistentCasingInFileNames": true,
    "strict": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "noImplicitReturns": true,
    "noFallthroughCasesInSwitch": true,
    "skipLibCheck": true,
    "allowSyntheticDefaultImports": true
  },
  "exclude": ["node_modules", "dist", "build", ".next"]
}
```

**Créer `.gitignore`** :
```gitignore
# Dependencies
node_modules/
.pnp
.pnp.js

# Production builds
dist/
build/
.next/
out/

# Testing
coverage/
.nyc_output

# Environment variables
.env
.env*.local

# Editor
.vscode/*
!.vscode/settings.json
!.vscode/extensions.json
.idea/
*.swp
*.swo
*~

# OS
.DS_Store
Thumbs.db

# Logs
*.log
npm-debug.log*
yarn-debug.log*
yarn-error.log*
pnpm-debug.log*

# Misc
.turbo
.vercel
```

---

## 🗄️ Configuration Supabase

### Étape 11 : Créer un Projet Supabase

1. **Aller sur** : https://supabase.com/
2. **Créer un compte** (gratuit)
3. **Créer un nouveau projet** :
   - Nom : `bricoloc-moderne`
   - Database Password : (noter précieusement)
   - Région : `West Europe (eu-west-1)` ou proche de vous

### Étape 12 : Configuration Supabase CLI (Optionnel)

```bash
# Installer Supabase CLI
npm install -g supabase

# Login
supabase login

# Lier le projet local (une fois dans apps/moderne/)
cd apps/moderne
supabase init
supabase link --project-ref <PROJECT_REF>
```

### Étape 13 : Variables d'Environnement

**Créer `apps/moderne/.env.local`** :
```bash
# Supabase
NEXT_PUBLIC_SUPABASE_URL=https://<PROJECT_REF>.supabase.co
NEXT_PUBLIC_SUPABASE_ANON_KEY=<ANON_KEY>
SUPABASE_SERVICE_ROLE_KEY=<SERVICE_ROLE_KEY>

# Stripe (Test Mode)
NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY=pk_test_...
STRIPE_SECRET_KEY=sk_test_...
STRIPE_WEBHOOK_SECRET=whsec_...

# Email (Resend)
RESEND_API_KEY=re_...

# App
NEXT_PUBLIC_APP_URL=http://localhost:3001
```

**⚠️ Important** : Ajouter `.env*.local` au `.gitignore` (déjà fait)

---

## ✅ Vérifications Finales

### Test 1 : Node.js et pnpm

```bash
node --version   # v22.x ou v20.x
pnpm --version   # 9.x
```

### Test 2 : Git Configuration

```bash
git config --list | grep user
# Doit afficher user.name et user.email
```

### Test 3 : VS Code depuis WSL

```bash
cd ~/bricoloc-architecture-evolution
code .
# Doit ouvrir VS Code avec l'extension WSL
```

### Test 4 : pnpm Workspaces

```bash
cd ~/bricoloc-architecture-evolution
pnpm install
# Doit installer les dépendances sans erreur
```

### Test 5 : Linting

```bash
# Une fois les fichiers TypeScript créés
pnpm lint
```

---

## 🚀 Démarrer le Développement

### Commandes Principales

```bash
# Développement Legacy
pnpm dev:legacy

# Développement Moderne
pnpm dev:moderne

# Les deux en parallèle
pnpm dev:all

# Build
pnpm build:all

# Tests
pnpm test

# Linting
pnpm lint
```

### Ports Utilisés

| Application | Port | URL |
|-------------|------|-----|
| Legacy | `3000` | http://localhost:3000 |
| Moderne | `3001` | http://localhost:3001 |

---

## 🐛 Troubleshooting

### Problème : `pnpm: command not found`

**Solution** :
```bash
npm install -g pnpm@latest
source ~/.bashrc
```

### Problème : VS Code n'ouvre pas depuis WSL

**Solution** :
```bash
# Installer code dans PATH
sudo apt update
sudo apt install wget ca-certificates

# Réinstaller VS Code Server
rm -rf ~/.vscode-server
code .
```

### Problème : Erreur de permissions Node.js

**Solution** :
```bash
# Changer le propriétaire du dossier .npm
sudo chown -R $(whoami) ~/.npm
sudo chown -R $(whoami) /usr/local/lib/node_modules
```

### Problème : Next.js ne démarre pas

**Solution** :
```bash
# Nettoyer le cache
rm -rf apps/moderne/.next
pnpm install
pnpm dev:moderne
```

---

## 📚 Ressources Utiles

### Documentation Officielle

- **Node.js** : https://nodejs.org/docs
- **pnpm** : https://pnpm.io/
- **Next.js** : https://nextjs.org/docs
- **Supabase** : https://supabase.com/docs
- **TypeScript** : https://www.typescriptlang.org/docs

### Tutoriels Recommandés

- **WSL Setup** : https://learn.microsoft.com/en-us/windows/wsl/
- **Clean Architecture** : https://blog.cleancoder.com/uncle-bob/2012/08/13/the-clean-architecture.html
- **Microservices** : https://microservices.io/

---

## 🎯 Prochaines Étapes

Une fois le setup terminé :

1. ✅ Vérifier que tout fonctionne (tests ci-dessus)
2. 📖 Lire le [README.md](../README.md)
3. 🏗️ Lire [ARCHITECTURE.md](../ARCHITECTURE.md)
4. 📝 Consulter la [Roadmap](../roadmap.md)
5. 💻 Commencer le développement !

---

**Besoin d'aide ?**  
- Issues GitHub : [URL_REPO]/issues
- Documentation : `docs/`

**Dernière mise à jour** : Octobre 2025