feat: debut d'un front vue.js + ajout de cursorrules
This commit is contained in:
ext.jeremy.guillot@maxicoffee.domains
parent
ca9a74fe69
commit
bee8572dc5
147
.cursor/rules/commands.mdc
Normal file
147
.cursor/rules/commands.mdc
Normal file
@@ -0,0 +1,147 @@
|
||||
---
|
||||
description:
|
||||
globs:
|
||||
alwaysApply: true
|
||||
---
|
||||
# Commandes Makefile de Mangarr
|
||||
|
||||
Toujours chercher si une commande est disponible dans [Makefile](mdc:Makefile).
|
||||
|
||||
## Structure Générale
|
||||
Le Makefile est organisé en plusieurs sections distinctes :
|
||||
- Docker 🐳
|
||||
- Composer 🧙
|
||||
- Symfony 🎵
|
||||
- Webpack Encore 📦
|
||||
|
||||
## Variables Principales
|
||||
```makefile
|
||||
# Exécutables Docker
|
||||
DOCKER_COMP = docker compose
|
||||
DOCKER_COMP_EXEC = $(DOCKER_COMP) exec
|
||||
|
||||
# Conteneurs
|
||||
PHP_CONT = $(DOCKER_COMP_EXEC) php
|
||||
NODE_CONT = $(DOCKER_COMP_EXEC) node
|
||||
|
||||
# Exécutables dans les conteneurs
|
||||
PHP = $(PHP_CONT) php
|
||||
COMPOSER = $(PHP_CONT) composer
|
||||
SYMFONY = $(PHP) bin/console
|
||||
SF_MEMORY = $(PHP) -d memory_limit=256M bin/console
|
||||
```
|
||||
|
||||
## Bonnes Pratiques
|
||||
|
||||
### 1. Organisation des Commandes
|
||||
- Regrouper les commandes par catégorie avec des commentaires clairs
|
||||
- Utiliser des variables pour les commandes répétitives
|
||||
- Documenter chaque commande avec `##` pour l'aide automatique
|
||||
- Préfixer les commandes internes avec `_` (exemple: `_check-deps`)
|
||||
|
||||
### 2. Paramètres et Options
|
||||
- Utiliser la syntaxe `make command p=value` pour les paramètres
|
||||
- Documenter les paramètres possibles dans les commentaires
|
||||
- Utiliser `?=` pour les valeurs par défaut modifiables
|
||||
|
||||
### 3. Dépendances
|
||||
- Définir clairement les dépendances entre les commandes
|
||||
- Utiliser des commandes composées pour les tâches complexes
|
||||
- Éviter les dépendances circulaires
|
||||
|
||||
### 4. Documentation
|
||||
- Chaque commande doit avoir une description avec `##`
|
||||
- Inclure des exemples d'utilisation pour les commandes complexes
|
||||
- Utiliser la commande `help` pour afficher la documentation
|
||||
|
||||
## Commandes Disponibles
|
||||
|
||||
### Docker 🐳
|
||||
```makefile
|
||||
build: ## Construit les images Docker
|
||||
up: ## Démarre les conteneurs
|
||||
start: ## Démarre les conteneurs en mode détaché
|
||||
down: ## Arrête et supprime les conteneurs
|
||||
logs: ## Affiche les logs en temps réel
|
||||
sh: ## Se connecte au conteneur PHP
|
||||
```
|
||||
|
||||
### Composer 🧙
|
||||
```makefile
|
||||
composer: ## Exécute une commande composer (c=command)
|
||||
vendor: ## Installe les dépendances
|
||||
```
|
||||
|
||||
### Symfony 🎵
|
||||
```makefile
|
||||
sf: ## Liste/exécute les commandes Symfony (c=command)
|
||||
cc: ## Vide le cache
|
||||
migration: ## Crée une nouvelle migration
|
||||
fixtures: ## Charge les fixtures
|
||||
consume: ## Consomme les messages de la queue
|
||||
```
|
||||
|
||||
### Webpack Encore 📦
|
||||
```makefile
|
||||
npm-install: ## Installe les dépendances npm
|
||||
npm-run: ## Lance le serveur de développement
|
||||
npm-watch: ## Surveille les changements
|
||||
```
|
||||
|
||||
## Exemples d'Utilisation
|
||||
|
||||
### 1. Installation du Projet
|
||||
```bash
|
||||
make install # Construit et démarre les conteneurs, installe les dépendances
|
||||
```
|
||||
|
||||
### 2. Développement Quotidien
|
||||
```bash
|
||||
make start # Démarre les conteneurs
|
||||
make npm-watch # Lance la compilation des assets
|
||||
make consume # Démarre les workers
|
||||
```
|
||||
|
||||
### 3. Commandes avec Paramètres
|
||||
```bash
|
||||
make composer c="require symfony/orm-pack" # Ajoute une dépendance
|
||||
make sf c="make:entity" # Crée une entité
|
||||
make test f="ScrapeChapterHandlerTest" # Lance un test spécifique
|
||||
```
|
||||
|
||||
## Ajout de Nouvelles Commandes
|
||||
|
||||
### 1. Structure de Base
|
||||
```makefile
|
||||
command-name: ## Description de la commande
|
||||
@$(DOCKER_COMP) ... # Commande à exécuter
|
||||
```
|
||||
|
||||
### 2. Avec Paramètres
|
||||
```makefile
|
||||
command-with-param: ## Description (p=value)
|
||||
@$(eval p ?=)
|
||||
@$(DOCKER_COMP) ... $(p)
|
||||
```
|
||||
|
||||
### 3. Commande Composée
|
||||
```makefile
|
||||
full-install: build start vendor npm-install ## Description complète
|
||||
```
|
||||
|
||||
## Maintenance
|
||||
|
||||
### 1. Nettoyage
|
||||
- Supprimer les commandes obsolètes
|
||||
- Mettre à jour les descriptions
|
||||
- Vérifier les dépendances
|
||||
|
||||
### 2. Documentation
|
||||
- Maintenir la section d'aide à jour
|
||||
- Ajouter des exemples pour les nouvelles commandes
|
||||
- Documenter les changements importants
|
||||
|
||||
### 3. Tests
|
||||
- Tester les nouvelles commandes
|
||||
- Vérifier les dépendances
|
||||
- Valider les paramètres
|
||||
155
.cursor/rules/front_vue.mdc
Normal file
155
.cursor/rules/front_vue.mdc
Normal file
@@ -0,0 +1,155 @@
|
||||
---
|
||||
description:
|
||||
globs:
|
||||
alwaysApply: false
|
||||
---
|
||||
# Architecture Frontend Vue.js
|
||||
|
||||
## Structure Générale
|
||||
L'application Vue.js suit une architecture hexagonale (ports & adapters) avec une séparation claire des responsabilités. Le code est organisé en domaines distincts dans le dossier `assets/vue/`.
|
||||
Pour ce qui est du style, on utilise TailwindCss, Headlessui et Heroicons.
|
||||
|
||||
```
|
||||
assets/vue/
|
||||
├── app/
|
||||
│ ├── shared/ # Code partagé entre les domaines
|
||||
│ │ ├── components/ # Composants réutilisables
|
||||
│ │ │ ├── ui/ # Composants UI génériques (boutons, inputs, etc.)
|
||||
│ │ │ └── layout/ # Layouts réutilisables
|
||||
│ │ ├── composables/ # Composables Vue partagés
|
||||
│ │ ├── plugins/ # Plugins Vue (router, pinia, etc.)
|
||||
│ │ └── utils/ # Utilitaires partagés
|
||||
│ │
|
||||
│ ├── domain/ # Domaines métier
|
||||
│ │ ├── manga/ # Domaine Manga
|
||||
│ │ │ ├── application/ # Cas d'utilisation
|
||||
│ │ │ │ ├── commands/ # Commands & CommandHandlers
|
||||
│ │ │ │ ├── queries/ # Queries & QueryHandlers
|
||||
│ │ │ │ └── store/ # Store Pinia du domaine
|
||||
│ │ │ ├── domain/ # Cœur métier
|
||||
│ │ │ │ ├── entities/ # Entités
|
||||
│ │ │ │ ├── value-objects/# Objets valeur
|
||||
│ │ │ │ └── services/ # Services métier
|
||||
│ │ │ ├── infrastructure/ # Adaptateurs
|
||||
│ │ │ │ ├── api/ # Client API
|
||||
│ │ │ │ └── repository/ # Implémentation repository
|
||||
│ │ │ └── presentation/ # Interface utilisateur
|
||||
│ │ │ ├── components/ # Composants spécifiques au domaine
|
||||
│ │ │ ├── composables/ # Composables spécifiques
|
||||
│ │ │ └── pages/ # Pages du domaine
|
||||
│ │ │
|
||||
│ │ ├── reader/ # Domaine Reader (même structure)
|
||||
│ │ └── scraping/ # Domaine Scraping (même structure)
|
||||
│ │
|
||||
│ └── router/ # Configuration du routeur
|
||||
│ └── index.js # Point d'entrée du routeur
|
||||
```
|
||||
|
||||
## Contrat d'API
|
||||
Le contrat d'API complet est disponible dans le fichier [api-docs.json](mdc:public/api-docs.json). Ce fichier contient la documentation OpenAPI de toutes les routes disponibles et leurs schémas.
|
||||
|
||||
## Règles d'Architecture
|
||||
|
||||
### 1. Règles Générales
|
||||
- Chaque domaine est isolé et ne dépend que de lui-même et du domaine `shared`
|
||||
- Les dépendances externes sont gérées via les adaptateurs dans l'infrastructure
|
||||
- L'application est une SPA (Single Page Application) sans rechargement de page
|
||||
- Utilisation de Vue Router pour la navigation côté client
|
||||
- Gestion d'état avec Pinia organisée par domaine
|
||||
|
||||
### 2. Couche Domain
|
||||
- Contient les entités et la logique métier pure
|
||||
- Ne dépend d'aucune bibliothèque externe sauf Vue.js
|
||||
- Les entités sont des classes JavaScript standard
|
||||
- Exemple :
|
||||
```javascript
|
||||
export class Manga {
|
||||
constructor({ id, title, description = null }) {
|
||||
this.id = id;
|
||||
this.title = title;
|
||||
this.description = description;
|
||||
}
|
||||
|
||||
static create(data) {
|
||||
return new Manga(data);
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### 3. Couche Application
|
||||
- Gère les cas d'utilisation via les stores Pinia
|
||||
- Coordonne les interactions entre l'UI et le domaine
|
||||
- Transforme les données du domaine pour l'UI
|
||||
- Exemple de store :
|
||||
```javascript
|
||||
export const useMangaStore = defineStore('manga', {
|
||||
state: () => ({
|
||||
mangas: [],
|
||||
loading: false,
|
||||
error: null
|
||||
}),
|
||||
actions: {
|
||||
async fetchMangas() {
|
||||
// Logique de chargement
|
||||
}
|
||||
}
|
||||
});
|
||||
```
|
||||
|
||||
### 4. Couche Infrastructure
|
||||
- Gère la communication avec l'API
|
||||
- Isole les dépendances externes
|
||||
- Exemple d'API client :
|
||||
```javascript
|
||||
export class MangaApi {
|
||||
static async fetchAll() {
|
||||
const response = await fetch('/api/mangas');
|
||||
return response.json();
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### 5. Couche Présentation
|
||||
- Composants Vue.js spécifiques au domaine
|
||||
- Utilise les composants UI partagés
|
||||
- Communique avec la couche application via les stores
|
||||
- Exemple de composant :
|
||||
```vue
|
||||
<template>
|
||||
<div class="manga-list">
|
||||
<MangaCard v-for="manga in mangas" :key="manga.id" :manga="manga" />
|
||||
</div>
|
||||
</template>
|
||||
```
|
||||
|
||||
## Bonnes Pratiques
|
||||
|
||||
### 1. Composants
|
||||
- Utiliser la Composition API pour la logique
|
||||
- Séparer les composants UI génériques des composants métier
|
||||
- Favoriser les props et events pour la communication parent-enfant
|
||||
- Utiliser les stores pour la communication entre composants distants
|
||||
|
||||
### 2. État
|
||||
- Un store Pinia par domaine
|
||||
- Actions asynchrones dans les stores
|
||||
- Getters pour les données dérivées
|
||||
- État local dans les composants quand possible
|
||||
|
||||
### 3. Router
|
||||
- Routes organisées par domaine
|
||||
- Lazy loading des composants de page
|
||||
- Navigation programmatique via le router
|
||||
- Guards pour la protection des routes
|
||||
|
||||
### 4. Style
|
||||
- Utilisation de Tailwind CSS
|
||||
- Classes utilitaires pour le style
|
||||
- Composants Headless UI pour l'accessibilité
|
||||
- Design system cohérent via les composants partagés
|
||||
|
||||
## Validation
|
||||
Les règles d'architecture peuvent être validées par des outils comme :
|
||||
- ESLint pour les règles de code
|
||||
- Tests unitaires pour les composants
|
||||
- Tests d'intégration pour les stores
|
||||
Reference in New Issue
Block a user