@silvestv/migration-planificator 3.0.0

package/dist/src/templates/workload/guide-rule-card.template.js

@@ -0,0 +1,107 @@
+"use strict";
+/**
+ * Template pour cards de règles dans le Migration Guide
+ * Réutilise les sections de rule-modal.template.ts (principe DRY)
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.renderGuideRuleCard = renderGuideRuleCard;
+exports.renderGuideRuleCards = renderGuideRuleCards;
+const shared_1 = require("../../utils/shared");
+const rule_modal_template_1 = require("./rule-modal.template");
+/**
+ * Retourne la couleur du badge selon le niveau de risque
+ */
+function getRiskColor(riskLevel) {
+    const colorMap = {
+        critical: 'red',
+        high: 'orange',
+        medium: 'yellow',
+        low: 'green'
+    };
+    return colorMap[riskLevel] || 'gray';
+}
+/**
+ * Génère une card de règle pour le guide
+ */
+function renderGuideRuleCard(rule, matches) {
+    const cardId = `guide-card-${rule.key}`;
+    const riskColor = getRiskColor(rule.risk_level);
+    return `
+        <div id="${cardId}"
+             class="bg-white border-2 border-gray-200 rounded-xl shadow-lg mb-6 overflow-hidden"
+             data-rule-card
+             data-rule-key="${rule.key}"
+             data-migration="${getMigrationFromRuleKey(rule.key)}">
+
+            <!-- Header avec checkbox et badges -->
+            <div class="bg-gradient-to-r from-${riskColor}-50 to-${riskColor}-100 p-4 border-b border-gray-200">
+                <div class="flex items-start justify-between">
+                    <div class="flex items-start space-x-3 flex-1">
+                        <!-- Checkbox completion -->
+                        <input
+                            type="checkbox"
+                            data-rule-checkbox="${rule.key}"
+                            class="mt-1 w-5 h-5 text-green-600 rounded focus:ring-2 focus:ring-green-500 cursor-pointer"
+                            title="Marquer comme complété"
+                        />
+
+                        <div class="flex-1">
+                            <h3 class="text-xl font-bold text-gray-800 mb-2">${(0, shared_1.escapeHtml)(rule.summary)}</h3>
+                            <div class="flex items-center flex-wrap gap-2">
+                                ${(0, shared_1.renderBadge)(rule.risk_level.toUpperCase(), riskColor)}
+                                ${(0, shared_1.renderBadge)(rule.category, 'blue')}
+                                ${rule.auto_fixable ? (0, shared_1.renderBadge)('Auto-fixable', 'green') : ''}
+                            </div>
+                        </div>
+                    </div>
+
+                    <!-- Bouton collapse -->
+                    <button
+                        data-collapse-trigger="${cardId}"
+                        class="ml-4 text-2xl font-bold text-gray-600 hover:text-gray-800 transition-colors"
+                        title="Réduire/Développer"
+                    >
+                        <span data-collapse-icon>▶</span>
+                    </button>
+                </div>
+            </div>
+
+            <!-- Contenu de la card (collapsible) - REPLIÉ PAR DÉFAUT -->
+            <div data-collapse-content class="hidden p-6 space-y-6">
+                ${(0, rule_modal_template_1.renderDescriptionSection)(rule)}
+                ${(0, rule_modal_template_1.renderCodeExamplesSection)(rule)}
+                ${(0, rule_modal_template_1.renderMigrationCommandSection)(rule)}
+                ${(0, rule_modal_template_1.renderDocumentationSection)(rule)}
+                ${(0, rule_modal_template_1.renderAffectedFilesSection)(matches)}
+                ${(0, rule_modal_template_1.renderMetadataSection)(rule)}
+            </div>
+        </div>
+    `;
+}
+/**
+ * Extrait la migration (to18, to19, to20) depuis la clé de règle
+ * Ex: "angular_18_environment" -> "to18"
+ */
+function getMigrationFromRuleKey(ruleKey) {
+    if (ruleKey.includes('_18_'))
+        return 'to18';
+    if (ruleKey.includes('_19_'))
+        return 'to19';
+    if (ruleKey.includes('_20_'))
+        return 'to20';
+    return 'unknown';
+}
+/**
+ * Génère toutes les cards pour un ensemble de règles
+ */
+function renderGuideRuleCards(rules, matches) {
+    // Grouper matches par ruleKey
+    const matchesByRule = new Map();
+    matches.forEach(match => {
+        if (!matchesByRule.has(match.ruleKey)) {
+            matchesByRule.set(match.ruleKey, []);
+        }
+        matchesByRule.get(match.ruleKey).push(match);
+    });
+    return rules.map(rule => renderGuideRuleCard(rule, matchesByRule.get(rule.key) || [])).join('');
+}

package/dist/src/templates/workload/hierarchy-nx.template.js

@@ -0,0 +1,104 @@
+"use strict";
+/**
+ * Template spécifique pour vue hiérarchique Nx Monorepo
+ * Structure: Monorepo > (Routines | Apps | Libs) > Migrations > Priorities > Rules
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.renderNxMonorepoView = renderNxMonorepoView;
+const core_1 = require("../../utils/core");
+const hierarchy_shared_1 = require("./hierarchy-shared");
+/**
+ * Vue pour Monorepo Nx : Affiche Monorepo > (Routines | Apps | Libs)
+ */
+function renderNxMonorepoView(workload) {
+    // Séparer monorepo (routines) et apps/libs
+    const monorepoTarget = workload.targets.find(t => t.targetType === 'monorepo');
+    const apps = workload.targets.filter(t => t.targetType === 'app');
+    const libs = workload.targets.filter(t => t.targetType === 'lib');
+    // Calculer le temps total global (monorepo + apps + libs)
+    const globalTotalTime = (0, core_1.calculateTotalTime)(workload.targets);
+    const monorepoName = workload.projectInfo.name;
+    const sectionId = `monorepo-${monorepoName.replace(/[^a-z0-9]/gi, '-')}`;
+    return `
+        <div id="${sectionId}" class="mb-6 border-l-4 border-purple-500 pl-4">
+            <div class="flex items-center justify-between bg-purple-50 p-4 rounded-lg cursor-pointer" data-collapse-trigger="${sectionId}">
+                <div class="flex items-center space-x-3">
+                    <span data-collapse-icon class="text-xl">▼</span>
+                    <h3 class="text-xl font-bold text-purple-900">🏗️ ${(0, core_1.escapeHtml)(monorepoName)}</h3>
+                    ${(0, core_1.renderBadge)('monorepo', 'purple')}
+                </div>
+                <span class="text-lg font-semibold text-purple-600" data-monorepo-total-time="${monorepoName}">${globalTotalTime}</span>
+            </div>
+            <div data-collapse-content class="mt-4 space-y-6">
+                ${monorepoTarget ? renderRoutinesSection(monorepoTarget, monorepoName) : ''}
+                ${apps.length > 0 ? renderTargetGroupSection('Applications', apps, 'blue', '📱', monorepoName) : ''}
+                ${libs.length > 0 ? renderTargetGroupSection('Librairies', libs, 'green', '📚', monorepoName) : ''}
+            </div>
+        </div>
+    `;
+}
+/**
+ * Section Routines Globales (monorepo)
+ */
+function renderRoutinesSection(monorepoTarget, monorepoName) {
+    const sectionId = `routines-section`;
+    return `
+        <div id="${sectionId}" class="ml-6 border-l-4 border-teal-400 pl-4">
+            <div class="flex items-center justify-between bg-teal-50 p-3 rounded-lg cursor-pointer" data-collapse-trigger="${sectionId}">
+                <div class="flex items-center space-x-2">
+                    <span data-collapse-icon class="text-lg">▼</span>
+                    <h4 class="text-lg font-bold text-teal-800">🔧 Routines Globales</h4>
+                </div>
+                <span class="font-semibold text-teal-600" data-target-time="${monorepoTarget.targetName}">${(0, core_1.formatTime)(monorepoTarget.totalTime.minutes, monorepoTarget.totalTime.hours, monorepoTarget.totalTime.days)}</span>
+            </div>
+            <div data-collapse-content class="mt-3 space-y-3">
+                ${monorepoTarget.migrations.map(migration => (0, hierarchy_shared_1.renderMigration)(monorepoTarget.targetName, migration)).join('')}
+            </div>
+        </div>
+    `;
+}
+/**
+ * Section générique pour Apps ou Libs (DRY)
+ */
+function renderTargetGroupSection(title, targets, color, icon, monorepoName) {
+    const sectionId = `${title.toLowerCase()}-section`;
+    const totalTime = (0, core_1.calculateTotalTime)(targets);
+    const groupId = `${monorepoName}-${title.toLowerCase()}`;
+    return `
+        <div id="${sectionId}" class="ml-6 border-l-4 border-${color}-400 pl-4">
+            <div class="flex items-center justify-between bg-${color}-50 p-3 rounded-lg cursor-pointer" data-collapse-trigger="${sectionId}">
+                <div class="flex items-center space-x-2">
+                    <span data-collapse-icon class="text-lg">▼</span>
+                    <h4 class="text-lg font-bold text-${color}-800">${icon} ${title}</h4>
+                    <span class="text-sm text-gray-600">(${targets.length})</span>
+                </div>
+                <span class="font-semibold text-${color}-600" data-group-time="${groupId}">${totalTime}</span>
+            </div>
+            <div data-collapse-content class="mt-3 space-y-4">
+                ${targets.map(target => renderSubTarget(target)).join('')}
+            </div>
+        </div>
+    `;
+}
+/**
+ * Render Sub-Target (app ou lib dans monorepo)
+ */
+function renderSubTarget(target) {
+    const sectionId = `subtarget-${target.targetName.replace(/[^a-z0-9]/gi, '-')}`;
+    const color = target.targetType === 'app' ? 'blue' : 'green';
+    return `
+        <div id="${sectionId}" class="ml-6 border-l-2 border-gray-300 pl-4">
+            <div class="flex items-center justify-between bg-gray-50 p-3 rounded-lg cursor-pointer" data-collapse-trigger="${sectionId}">
+                <div class="flex items-center space-x-2">
+                    <span data-collapse-icon class="text-base">▼</span>
+                    <h5 class="text-base font-semibold text-gray-800">${(0, core_1.escapeHtml)(target.targetName)}</h5>
+                    ${(0, core_1.renderBadge)(target.targetType, color)}
+                </div>
+                <span class="font-semibold text-gray-600" data-target-time="${target.targetName}">${(0, core_1.formatTime)(target.totalTime.minutes, target.totalTime.hours, target.totalTime.days)}</span>
+            </div>
+            <div data-collapse-content class="mt-3 space-y-3">
+                ${target.migrations.map(migration => (0, hierarchy_shared_1.renderMigration)(target.targetName, migration)).join('')}
+            </div>
+        </div>
+    `;
+}

package/dist/src/templates/workload/hierarchy-shared.js

@@ -0,0 +1,163 @@
+"use strict";
+/**
+ * Composants partagés pour templates hiérarchiques (Nx & Standalone)
+ * Contient les renderers pour: Migration, Priority, Rule
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.renderMigration = renderMigration;
+exports.renderPriority = renderPriority;
+exports.renderRule = renderRule;
+const core_1 = require("../../utils/core");
+/**
+ * Render Migration (niveau 2 : to18, to19, to20)
+ */
+function renderMigration(targetName, migration) {
+    const migrationId = `${targetName}-${migration.migration}`;
+    const sectionId = `section-${migrationId}`;
+    const colorMap = { to18: 'blue', to19: 'indigo', to20: 'purple' };
+    const color = colorMap[migration.migration] || 'gray';
+    return `
+        <div id="${sectionId}" class="ml-8 border-l-4 border-${color}-400 pl-4" data-migration="${migration.migration}">
+            <div class="flex items-center justify-between bg-${color}-50 p-3 rounded-lg cursor-pointer" data-collapse-trigger="${sectionId}">
+                <div class="flex items-center space-x-2">
+                    <span data-collapse-icon class="text-lg">▼</span>
+                    <span class="font-bold text-${color}-800">${migration.migration.toUpperCase()}</span>
+                </div>
+                <span class="font-semibold text-${color}-600" data-migration-time="${migrationId}">${(0, core_1.formatTime)(migration.totalTime.minutes, migration.totalTime.hours, migration.totalTime.days)}</span>
+            </div>
+            <div data-collapse-content class="mt-3 space-y-3">
+                ${migration.priorities.map(priority => renderPriority(migrationId, priority)).join('')}
+            </div>
+        </div>
+    `;
+}
+/**
+ * Render Priority (niveau 3 : obligatoire, recommandé, optionnel)
+ */
+function renderPriority(migrationId, priority) {
+    const priorityId = `${migrationId}-${priority.priority}`;
+    const sectionId = `section-${priorityId}`;
+    const colorMap = { obligatoire: 'red', recommande: 'yellow', optionnelle: 'green' };
+    const color = colorMap[priority.priority] || 'gray';
+    return `
+        <div id="${sectionId}" class="ml-8 border-l-4 border-${color}-400 pl-4">
+            <div class="flex items-center justify-between bg-${color}-50 p-3 rounded-lg cursor-pointer" data-collapse-trigger="${sectionId}">
+                <div class="flex items-center space-x-2">
+                    <span data-collapse-icon class="text-lg">▼</span>
+                    ${(0, core_1.renderBadge)(priority.priority.charAt(0).toUpperCase() + priority.priority.slice(1), color)}
+                    <span class="text-sm text-gray-600">(${priority.rules.length} règles)</span>
+                </div>
+                <span class="font-semibold text-${color}-600" data-priority-time="${priorityId}">${(0, core_1.formatTime)(priority.totalTime.minutes, priority.totalTime.hours, priority.totalTime.days)}</span>
+            </div>
+            <div data-collapse-content class="mt-3 space-y-2">
+                ${priority.rules.map(rule => renderRule(rule)).join('')}
+            </div>
+        </div>
+    `;
+}
+/**
+ * Render Rule (niveau 4 : règle individuelle avec édition temps)
+ * Note: Les attributs data-risk-level, data-category, data-rule-type seront injectés dynamiquement
+ * côté client car RuleWorkload ne contient pas ces métadonnées (uniquement Rule les a)
+ */
+function renderRule(rule) {
+    const typeColor = rule.type === 'routine' ? 'teal' : rule.type === 'special' ? 'pink' : rule.type === 'combined' ? 'purple' : 'blue';
+    const hasSpecialWorkload = rule.type === 'special' || rule.type === 'combined';
+    // Calcul des temps
+    const baseOccurrences = rule.baseOccurrences ?? rule.occurrences;
+    const baseMinutes = rule.minutesPerOccurrence * baseOccurrences;
+    const specialMinutes = hasSpecialWorkload && rule.specialWorkloadFiles && rule.specialTimePerFile
+        ? rule.specialWorkloadFiles * rule.specialTimePerFile
+        : 0;
+    return `
+        <div
+            class="ml-8 bg-white border border-gray-200 rounded-lg p-4 hover:shadow-md transition-shadow"
+            data-rule-card
+            data-rule-key="${rule.ruleKey}"
+            data-title="${(0, core_1.escapeHtml)(rule.ruleSummary)}"
+            data-rule-type="${rule.type || 'standard'}"
+        >
+            <div class="flex justify-between items-start">
+                <div class="flex-1">
+                    <!-- Chips container (rempli dynamiquement côté client) -->
+                    <div class="flex items-center gap-2 mb-2" data-chips-container="${rule.ruleKey}"></div>
+
+                    <h5 class="font-semibold text-gray-800 mb-2">${(0, core_1.escapeHtml)(rule.ruleSummary)}</h5>
+                    <div class="flex items-center space-x-2 text-sm mb-2">
+                        ${(0, core_1.renderBadge)(rule.type || 'standard', typeColor)}
+                    </div>
+                    <div class="text-sm text-gray-700">
+                        ${rule.type === 'combined' ? `
+                        <span data-calc-display="${rule.ruleKey}">
+                            ${baseOccurrences} occ ×
+                            <input
+                                type="number"
+                                data-time-input="${rule.ruleKey}"
+                                data-original-time="${rule.minutesPerOccurrence}"
+                                value="${rule.minutesPerOccurrence}"
+                                min="1"
+                                class="w-14 px-2 py-1 mx-1 border border-gray-300 rounded text-center"
+                            />min +
+                            ${rule.specialWorkloadFiles} fichiers ×
+                            <input
+                                type="number"
+                                data-special-time-input="${rule.ruleKey}"
+                                data-original-special-time="${rule.specialTimePerFile}"
+                                value="${rule.specialTimePerFile}"
+                                min="1"
+                                class="w-14 px-2 py-1 mx-1 border border-gray-300 rounded text-center"
+                            />min =
+                            <span class="font-semibold text-gray-900" data-rule-time="${rule.ruleKey}">${(0, core_1.formatTime)(rule.totalTime.minutes, rule.totalTime.hours, rule.totalTime.days)}</span>
+                        </span>
+                        ` : rule.type === 'special' ? `
+                        <span data-calc-display="${rule.ruleKey}">
+                            ${rule.specialWorkloadFiles} fichiers ×
+                            <input
+                                type="number"
+                                data-special-time-input="${rule.ruleKey}"
+                                data-original-special-time="${rule.specialTimePerFile}"
+                                value="${rule.specialTimePerFile}"
+                                min="1"
+                                class="w-14 px-2 py-1 mx-1 border border-gray-300 rounded text-center"
+                            />min =
+                            <span class="font-semibold text-gray-900" data-rule-time="${rule.ruleKey}">${(0, core_1.formatTime)(rule.totalTime.minutes, rule.totalTime.hours, rule.totalTime.days)}</span>
+                        </span>
+                        ` : rule.type === 'routine' ? `
+                        <span data-calc-display="${rule.ruleKey}">
+                            ${rule.occurrences} ×
+                            <input
+                                type="number"
+                                data-time-input="${rule.ruleKey}"
+                                data-original-time="${rule.minutesPerOccurrence}"
+                                value="${rule.minutesPerOccurrence}"
+                                min="1"
+                                class="w-14 px-2 py-1 mx-1 border border-gray-300 rounded text-center"
+                            />min =
+                            <span class="font-semibold text-gray-900" data-rule-time="${rule.ruleKey}">${(0, core_1.formatTime)(rule.totalTime.minutes, rule.totalTime.hours, rule.totalTime.days)}</span>
+                        </span>
+                        ` : `
+                        <span data-calc-display="${rule.ruleKey}">
+                            ${rule.occurrences} occ ×
+                            <input
+                                type="number"
+                                data-time-input="${rule.ruleKey}"
+                                data-original-time="${rule.minutesPerOccurrence}"
+                                value="${rule.minutesPerOccurrence}"
+                                min="1"
+                                class="w-14 px-2 py-1 mx-1 border border-gray-300 rounded text-center"
+                            />min =
+                            <span class="font-semibold text-gray-900" data-rule-time="${rule.ruleKey}">${(0, core_1.formatTime)(rule.totalTime.minutes, rule.totalTime.hours, rule.totalTime.days)}</span>
+                        </span>
+                        `}
+                    </div>
+                </div>
+                <button
+                    class="px-3 py-1 text-sm bg-blue-500 text-white rounded hover:bg-blue-600"
+                    data-modal-trigger="modal-${rule.ruleKey}"
+                >
+                    Détails
+                </button>
+            </div>
+        </div>
+    `;
+}

package/dist/src/templates/workload/hierarchy-standalone.template.js

@@ -0,0 +1,36 @@
+"use strict";
+/**
+ * Template spécifique pour vue hiérarchique Angular Standalone
+ * Structure: Target > Migrations > Priorities > Rules
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.renderStandaloneView = renderStandaloneView;
+const core_1 = require("../../utils/core");
+const hierarchy_shared_1 = require("./hierarchy-shared");
+/**
+ * Vue pour projet Standalone : Affiche directement les migrations
+ */
+function renderStandaloneView(workload) {
+    return workload.targets.map(target => renderStandaloneTarget(target)).join('');
+}
+/**
+ * Render Target pour Standalone (structure simple)
+ */
+function renderStandaloneTarget(target) {
+    const sectionId = `target-${target.targetName.replace(/[^a-z0-9]/gi, '-')}`;
+    return `
+        <div id="${sectionId}" class="mb-6 border-l-4 border-blue-500 pl-4">
+            <div class="flex items-center justify-between bg-blue-50 p-4 rounded-lg cursor-pointer" data-collapse-trigger="${sectionId}">
+                <div class="flex items-center space-x-3">
+                    <span data-collapse-icon class="text-xl">▼</span>
+                    <h3 class="text-xl font-bold text-blue-900">${(0, core_1.escapeHtml)(target.targetName)}</h3>
+                    ${(0, core_1.renderBadge)(target.targetType, 'blue')}
+                </div>
+                <span class="text-lg font-semibold text-blue-600" data-target-time="${target.targetName}">${(0, core_1.formatTime)(target.totalTime.minutes, target.totalTime.hours, target.totalTime.days)}</span>
+            </div>
+            <div data-collapse-content class="mt-4 space-y-4">
+                ${target.migrations.map(migration => (0, hierarchy_shared_1.renderMigration)(target.targetName, migration)).join('')}
+            </div>
+        </div>
+    `;
+}

package/dist/src/templates/workload/hierarchy.template.js

@@ -0,0 +1,35 @@
+"use strict";
+/**
+ * Template vue hiérarchique (Entry Point)
+ * Délègue vers Nx ou Standalone selon le type de projet
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.renderHierarchy = renderHierarchy;
+const project_strategy_1 = require("../../core/project-strategy");
+const hierarchy_nx_template_1 = require("./hierarchy-nx.template");
+const hierarchy_standalone_template_1 = require("./hierarchy-standalone.template");
+/**
+ * Point d'entrée : Render hiérarchie complète
+ * Détecte automatiquement le type de projet et délègue
+ */
+function renderHierarchy(workload) {
+    const strategy = (0, project_strategy_1.createProjectStrategy)(workload.projectInfo);
+    const isMultiTarget = strategy.isMultiTarget(workload.projectInfo);
+    return `
+        <div class="bg-white rounded-2xl shadow-xl p-8">
+            <div class="flex justify-between items-center mb-6">
+                <h2 class="text-3xl font-bold text-gray-800">🗂️ Vue Hiérarchique</h2>
+                <div class="space-x-2">
+                    <button onclick="expandAll()" class="px-4 py-2 bg-blue-500 text-white rounded-lg hover:bg-blue-600">
+                        Tout Déplier
+                    </button>
+                    <button onclick="collapseAll()" class="px-4 py-2 bg-gray-500 text-white rounded-lg hover:bg-gray-600">
+                        Tout Replier
+                    </button>
+                </div>
+            </div>
+
+            ${isMultiTarget ? (0, hierarchy_nx_template_1.renderNxMonorepoView)(workload) : (0, hierarchy_standalone_template_1.renderStandaloneView)(workload)}
+        </div>
+    `;
+}