guford-ui 0.2.0 → 0.3.0

package/bin.mjs

@@ -25,6 +25,7 @@
 import { readFileSync, writeFileSync, existsSync, mkdirSync } from 'node:fs';
 import { dirname, basename, join, resolve, relative } from 'node:path';
 import { fileURLToPath } from 'node:url';
+import { execSync } from 'node:child_process';
 
 const __dirname = dirname(fileURLToPath(import.meta.url));
 const ROOT = resolve(__dirname, '..'); // racine du dépôt guford-ui (mode local)
@@ -150,17 +151,141 @@ function loadProjectConfig(cwd) {
   return null;
 }
 
+// --- auto-câblage du projet cible ------------------------------------------
+/** Détecte la structure du projet Angular consommateur. */
+function detectProject(cwd) {
+  const root = resolve(process.cwd(), cwd);
+  const out = { root, ngMajor: null, ngJsonPath: null, ngJson: null, projName: null, sourceRoot: 'src', stylesFile: null, appConfig: null, hasTailwind: false };
+
+  const pkgPath = join(root, 'package.json');
+  if (existsSync(pkgPath)) {
+    try {
+      const pkg = JSON.parse(readFileSync(pkgPath, 'utf8'));
+      const deps = { ...(pkg.dependencies || {}), ...(pkg.devDependencies || {}) };
+      const ver = deps['@angular/core'];
+      const m = ver && ver.match(/(\d+)/);
+      if (m) out.ngMajor = Number(m[1]);
+      out.hasTailwind = !!deps['tailwindcss'];
+    } catch {}
+  }
+
+  const ngJsonPath = join(root, 'angular.json');
+  if (existsSync(ngJsonPath)) {
+    try {
+      const ngJson = JSON.parse(readFileSync(ngJsonPath, 'utf8'));
+      out.ngJsonPath = ngJsonPath;
+      out.ngJson = ngJson;
+      for (const [name, proj] of Object.entries(ngJson.projects || {})) {
+        const build = proj.architect?.build || proj.targets?.build;
+        if (build) {
+          out.projName = name;
+          out.sourceRoot = proj.sourceRoot || 'src';
+          const styles = build.options?.styles || [];
+          out.stylesFile = styles.find((s) => typeof s === 'string' && /\.(scss|css)$/.test(s)) || `${out.sourceRoot}/styles.scss`;
+          break;
+        }
+      }
+    } catch {}
+  }
+  out.appConfig = join(root, out.sourceRoot, 'app', 'app.config.ts');
+  return out;
+}
+
+/** Versions CoreUI/CDK alignées sur la version d'Angular du projet. */
+function coreuiVersions(ngMajor) {
+  const map = { 19: '^5.4', 20: '^5.5', 21: '^5.6', 22: '^5.6' };
+  const cu = map[ngMajor] || '^5.5';
+  const ng = ngMajor ? `^${ngMajor}.0.0` : '^20.0.0';
+  return {
+    list: [`@coreui/angular@${cu}`, '@coreui/coreui@~5.4', `@coreui/icons-angular@${cu}`, `@angular/cdk@${ng}`, `@angular/animations@${ng}`],
+    ng,
+  };
+}
+
+function runNpmInstall(root, pkgs, { dryRun, dev = false } = {}) {
+  if (!pkgs.length) return;
+  const cmd = `npm install ${dev ? '-D ' : ''}${pkgs.join(' ')} --legacy-peer-deps`;
+  console.log(`  ${c.cyan('$')} ${cmd}`);
+  if (dryRun) return;
+  try {
+    execSync(cmd, { cwd: root, stdio: 'inherit' });
+  } catch {
+    console.log(c.yellow(`  ⚠ npm install a échoué — lance-le manuellement : ${cmd}`));
+  }
+}
+
+/** Ajoute une ligne à un fichier si absente (création si besoin). */
+function ensureLine(path, line, { dryRun, prepend = false } = {}) {
+  let content = existsSync(path) ? readFileSync(path, 'utf8') : '';
+  if (content.includes(line.trim())) return false;
+  content = prepend ? `${line}\n${content}` : `${content}${content.endsWith('\n') || content === '' ? '' : '\n'}${line}\n`;
+  if (!dryRun) {
+    mkdirSync(dirname(path), { recursive: true });
+    writeFileSync(path, content);
+  }
+  return true;
+}
+
+/** Crée/complète tailwind.config.js avec le preset partagé. */
+function wireTailwind(root, dryRun) {
+  const path = join(root, 'tailwind.config.js');
+  if (!existsSync(path)) {
+    const content = `/** @type {import('tailwindcss').Config} */\nmodule.exports = {\n  presets: [require('./tailwind.preset.cjs')],\n  content: ['./src/**/*.{html,ts}'],\n};\n`;
+    if (!dryRun) writeFileSync(path, content);
+    return 'créé';
+  }
+  let s = readFileSync(path, 'utf8');
+  if (s.includes('tailwind.preset.cjs')) return 'déjà présent';
+  const m = s.match(/(module\.exports\s*=\s*\{|export\s+default\s*\{)/);
+  if (!m) return 'à compléter à la main';
+  const idx = m.index + m[0].length;
+  s = `${s.slice(0, idx)}\n  presets: [require('./tailwind.preset.cjs')],${s.slice(idx)}`;
+  if (!dryRun) writeFileSync(path, s);
+  return 'preset ajouté';
+}
+
+/** Ajoute le CSS CoreUI au tableau styles d'angular.json. */
+function wireCoreuiCss(proj, dryRun) {
+  if (!proj.ngJson || !proj.projName) return 'angular.json introuvable';
+  const cssPath = 'node_modules/@coreui/coreui/dist/css/coreui.min.css';
+  const p = proj.ngJson.projects[proj.projName];
+  const build = p.architect?.build || p.targets?.build;
+  build.options = build.options || {};
+  build.options.styles = build.options.styles || [];
+  if (build.options.styles.includes(cssPath)) return 'déjà présent';
+  build.options.styles.unshift(cssPath);
+  if (!dryRun) writeFileSync(proj.ngJsonPath, JSON.stringify(proj.ngJson, null, 2) + '\n');
+  return 'ajouté';
+}
+
+/** Ajoute provideAnimations() dans app.config.ts. */
+function wireProvideAnimations(appConfigPath, dryRun) {
+  if (!existsSync(appConfigPath)) return 'app.config.ts introuvable';
+  let s = readFileSync(appConfigPath, 'utf8');
+  if (s.includes('provideAnimations')) return 'déjà présent';
+  if (!s.includes('@angular/platform-browser/animations')) {
+    s = `import { provideAnimations } from '@angular/platform-browser/animations';\n${s}`;
+  }
+  const m = s.match(/providers\s*:\s*\[/);
+  if (!m) return 'providers[] introuvable';
+  const idx = m.index + m[0].length;
+  s = `${s.slice(0, idx)}\n    provideAnimations(),${s.slice(idx)}`;
+  if (!dryRun) writeFileSync(appConfigPath, s);
+  return 'ajouté';
+}
+
 // --- parseur d'arguments ---------------------------------------------------
 function parseArgs(argv) {
   const positionals = [];
   const flags = {
     cwd: '.', dir: undefined, overwrite: false, dryRun: false,
-    registry: undefined, token: undefined, repo: undefined, ref: undefined,
+    registry: undefined, token: undefined, repo: undefined, ref: undefined, install: true,
   };
   for (let i = 0; i < argv.length; i++) {
     const a = argv[i];
     if (a === '--overwrite') flags.overwrite = true;
     else if (a === '--dry-run') flags.dryRun = true;
+    else if (a === '--no-install') flags.install = false;
     else if (a === '--cwd') flags.cwd = argv[++i];
     else if (a === '--dir') flags.dir = argv[++i];
     else if (a === '--registry') flags.registry = argv[++i];
@@ -261,14 +386,45 @@ async function cmdAdd(names, flags) {
   }
 
   console.log(log.join('\n'));
+
+  // --- Dépendances npm + câblage CoreUI automatiques ---
+  const proj = detectProject(flags.cwd);
+  const usesCoreui = npmDeps.has('@coreui/angular');
+
+  // Liste à installer : deps registry (hors @coreui/angular et @angular/cdk gérés à part) + peers CoreUI alignés
+  const installList = [...npmDeps].filter((d) => d !== '@coreui/angular' && d !== '@angular/cdk');
+  if (usesCoreui) {
+    const { list } = coreuiVersions(proj.ngMajor);
+    installList.push(...list);
+    console.log(
+      c.dim(
+        `\n  CoreUI détecté → versions alignées sur Angular ${proj.ngMajor ?? '?'} ` +
+          `(${coreuiVersions(proj.ngMajor).list.join(' ')})`,
+      ),
+    );
+  } else if (npmDeps.has('@angular/cdk')) {
+    installList.push(`@angular/cdk${proj.ngMajor ? '@^' + proj.ngMajor + '.0.0' : ''}`);
+  }
+
   console.log('');
-  if (npmDeps.size) {
-    console.log(c.cyan('  Dépendances npm à installer dans le projet cible:'));
-    console.log(`    ${c.bold('npm install ' + [...npmDeps].join(' '))}\n`);
+  if (installList.length) {
+    if (flags.install) runNpmInstall(proj.root, installList, { dryRun: flags.dryRun });
+    else {
+      console.log(c.cyan('  Dépendances npm (à installer — sauté: --no-install):'));
+      console.log(`    ${c.bold('npm install ' + installList.join(' '))}`);
+    }
   }
+
+  // Câblage CoreUI (CSS + animations) si nécessaire
+  if (usesCoreui) {
+    console.log(c.cyan('\n  Câblage CoreUI:'));
+    console.log(`    ${c.green('✓')} angular.json styles — ${wireCoreuiCss(proj, flags.dryRun)}`);
+    console.log(`    ${c.green('✓')} app.config.ts provideAnimations() — ${wireProvideAnimations(proj.appConfig, flags.dryRun)}`);
+  }
+
   console.log(
     c.dim(
-      `  ${written} fichier(s) ${flags.dryRun ? 'seraient écrits' : 'écrits'}` +
+      `\n  ${written} fichier(s) ${flags.dryRun ? 'seraient écrits' : 'écrits'}` +
         (skipped ? `, ${skipped} ignoré(s)` : '') +
         '.\n',
     ),
@@ -332,12 +488,30 @@ async function cmdInit(flags) {
   }
 
   console.log(log.join('\n'));
-  console.log(c.cyan('\n  Étapes de câblage:'));
-  console.log(`    1. Styles globaux — ajoutez:  ${c.bold(`@import './styles/guford-ui-tokens.css';`)}`);
-  console.log(`       ${c.dim(`(dans ${dir}/styles.scss ou ${dir}/styles.css)`)}`);
-  console.log(`    2. tailwind.config.js — ajoutez:  ${c.bold(`presets: [require('./tailwind.preset.cjs')]`)}`);
-  console.log(`    3. Peer-deps de base:  ${c.bold('npm install clsx tailwind-merge')}`);
-  console.log(`       ${c.dim('(certains composants requièrent aussi @coreui/angular — voir `info <name>`)')}`);
+
+  // --- Câblage automatique du projet cible ---
+  const proj = detectProject(flags.cwd);
+  console.log(c.cyan('\n  Câblage automatique:'));
+
+  // 1. Fichier de styles global : directives Tailwind (si absentes) + @import tokens
+  const stylesFile = proj.stylesFile ? join(proj.root, proj.stylesFile) : join(projectRoot, dir, 'styles.scss');
+  if (!existsSync(stylesFile) || !readFileSync(stylesFile, 'utf8').includes('@tailwind base')) {
+    ensureLine(stylesFile, '@tailwind base;\n@tailwind components;\n@tailwind utilities;', { dryRun: flags.dryRun, prepend: true });
+  }
+  const addedImport = ensureLine(stylesFile, `@import './styles/guford-ui-tokens.css';`, { dryRun: flags.dryRun });
+  console.log(`    ${addedImport ? c.green('✓') : c.dim('•')} tokens importés → ${relative(process.cwd(), stylesFile)}`);
+
+  // 2. tailwind.config.js (preset partagé)
+  console.log(`    ${c.green('✓')} tailwind.config.js — ${wireTailwind(proj.root, flags.dryRun)}`);
+
+  // 3. Peer-deps de base (+ Tailwind si absent)
+  if (flags.install) {
+    runNpmInstall(proj.root, ['clsx', 'tailwind-merge'], { dryRun: flags.dryRun });
+    if (!proj.hasTailwind) runNpmInstall(proj.root, ['tailwindcss@3', 'postcss', 'autoprefixer'], { dryRun: flags.dryRun, dev: true });
+  } else {
+    console.log(c.dim('    • npm install clsx tailwind-merge' + (proj.hasTailwind ? '' : ' (+ -D tailwindcss@3 postcss autoprefixer)') + '  (sauté: --no-install)'));
+  }
+
   console.log(
     c.dim(
       `\n  ${written} fichier(s) ${flags.dryRun ? 'seraient écrits' : 'écrits'}` +
@@ -364,8 +538,13 @@ function help() {
     --repo <owner/repo>  Dépôt GitHub (défaut: ${DEFAULT_REPO})
     --ref <branch|tag>   Réf GitHub (défaut: ${DEFAULT_REF}) — pin sur un tag pour reproductibilité
     --token <token>      Token GitHub pour dépôt privé (sinon $GUFORD_UI_TOKEN / $GITHUB_TOKEN)
+    --no-install         Ne lance pas npm install (affiche les commandes)
     --overwrite          Écrase les fichiers existants
-    --dry-run            Simule sans écrire
+    --dry-run            Simule sans écrire ni installer
+
+  ${c.cyan('Auto-câblage:')} init/add modifient le projet cible (npm install avec
+    CoreUI aligné sur votre Angular, @import des tokens, preset Tailwind,
+    CSS CoreUI dans angular.json, provideAnimations dans app.config.ts).
 
   ${c.cyan('Dépôt privé:')} crée un PAT GitHub (Contents: read), puis
     ${c.dim('set GUFORD_UI_TOKEN=<token>   # Windows (cmd)   |   $env:GUFORD_UI_TOKEN="<token>" (PowerShell)')}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "guford-ui",
-  "version": "0.2.0",
+  "version": "0.3.0",
   "description": "CLI pour installer les composants du registry guford-ui (façon shadcn).",
   "type": "module",
   "bin": {