@fecommunity/reactpress 3.0.3 → 3.0.4

package/ui/interactive.js

@@ -1,55 +1,231 @@
+const fs = require('fs');
+const path = require('path');
 const inquirer = require('inquirer');
+const ora = require('ora');
 const open = require('open');
 const { printBanner } = require('./banner');
-const { brand, label } = require('./theme');
+const {
+  brand,
+  icon,
+  label,
+  ok,
+  fail,
+  sectionHeader,
+  statusPill,
+  padRight,
+} = require('./theme');
 const { ensureOriginalCwd } = require('../lib/root');
+const { describeProject, hasClient } = require('../lib/project-type');
 const { ensureProjectEnvironment } = require('../lib/bootstrap');
 const { runDev } = require('../lib/dev');
 const { runApiDev } = require('../lib/api-dev');
 const { runLifecycleCommand } = require('../lib/lifecycle');
 const { runDockerCommand } = require('../lib/docker');
+const { runNginxCommand } = require('../lib/nginx');
 const { printUnifiedStatus } = require('../lib/status');
 const { runDoctor } = require('../lib/doctor');
 const { runBuild, TARGETS } = require('../lib/build');
 const { runNodeScript } = require('../lib/spawn');
 const { getClientBin } = require('../lib/paths');
-const { loadClientSiteUrl } = require('../lib/http');
+const { loadClientSiteUrl, loadServerSiteUrl, isHttpResponding } = require('../lib/http');
+const { isDockerRunning } = require('../lib/docker');
 const { t } = require('../lib/i18n');
 
-function getMenuActions() {
-  return [
-    { name: t('menu.dev'), value: 'dev' },
-    { name: t('menu.init'), value: 'init' },
-    { name: t('menu.status'), value: 'status' },
-    { name: t('menu.doctor'), value: 'doctor' },
-    new inquirer.Separator(),
-    { name: t('menu.devApi'), value: 'dev:api' },
-    { name: t('menu.devClient'), value: 'dev:client' },
-    { name: t('menu.serverStart'), value: 'server:start' },
-    { name: t('menu.serverStop'), value: 'server:stop' },
-    { name: t('menu.serverRestart'), value: 'server:restart' },
-    new inquirer.Separator(),
-    { name: t('menu.build'), value: 'build' },
-    { name: t('menu.dockerStart'), value: 'docker:start' },
-    { name: t('menu.dockerUp'), value: 'docker:up' },
-    { name: t('menu.dockerStop'), value: 'docker:stop' },
+function menuSection(title) {
+  return new inquirer.Separator(sectionHeader(title));
+}
+
+function formatChoice(key, text, hint) {
+  const keyCol = key ? brand.primary(padRight(key, 2)) : '   ';
+  const hintPart = hint ? brand.dim(`  ${hint}`) : '';
+  return `${keyCol}  ${text}${hintPart}`;
+}
+
+function assignShortcuts(items) {
+  let n = 0;
+  return items.map((item) => {
+    if (item instanceof inquirer.Separator || item.type === 'separator') {
+      return item;
+    }
+    n += 1;
+    const key = n <= 9 ? String(n) : '';
+    return {
+      ...item,
+      name: formatChoice(key, item._label || item.name, item._hint),
+      short: item.value,
+    };
+  });
+}
+
+function choice(labelKey, value, hintKey) {
+  return {
+    _label: t(labelKey),
+    _hint: hintKey ? t(hintKey) : '',
+    value,
+  };
+}
+
+function getMenuActions(project) {
+  const standalone = project.type === 'standalone';
+  const monorepo = project.type === 'monorepo';
+  const showClient = hasClient(project.root);
+
+  const items = [
+    menuSection(t('menu.section.run')),
+    choice('menu.dev', 'dev', 'menu.hint.dev'),
+    choice('menu.init', 'init', 'menu.hint.init'),
+    choice('menu.status', 'status', 'menu.hint.status'),
+    choice('menu.doctor', 'doctor', 'menu.hint.doctor'),
+    menuSection(t('menu.section.lifecycle')),
+    choice('menu.devApi', 'dev:api', 'menu.hint.devApi'),
+  ];
+
+  if (showClient) {
+    items.push(choice('menu.devClient', 'dev:client', 'menu.hint.devClient'));
+  }
+
+  items.push(
+    choice('menu.serverStart', 'server:start', 'menu.hint.serverStart'),
+    choice('menu.serverStop', 'server:stop', 'menu.hint.serverStop'),
+    choice('menu.serverRestart', 'server:restart', 'menu.hint.serverRestart'),
+    menuSection(t('menu.section.build')),
+    choice('menu.build', 'build', 'menu.hint.build')
+  );
+
+  if (monorepo) {
+    items.push(
+      choice('menu.dockerStart', 'docker:start', 'menu.hint.dockerStart'),
+      choice('menu.dockerUp', 'docker:up', 'menu.hint.dockerUp'),
+      choice('menu.dockerStop', 'docker:stop', 'menu.hint.dockerStop')
+    );
+  } else if (standalone) {
+    items.push(
+      choice('menu.dockerUp', 'docker:up', 'menu.hint.dockerUp'),
+      choice('menu.dockerStop', 'docker:stop', 'menu.hint.dockerStop')
+    );
+  }
+
+  items.push(
+    menuSection(t('menu.section.tools')),
+    choice('menu.nginxUp', 'nginx:up', 'menu.hint.nginxUp'),
+    choice('menu.nginxOpen', 'nginx:open', 'menu.hint.nginxOpen'),
+    choice('menu.nginxReload', 'nginx:reload', 'menu.hint.nginxReload'),
+    choice('menu.openAdmin', 'open:admin', 'menu.hint.openAdmin')
+  );
+
+  if (monorepo) {
+    items.push(choice('menu.publish', 'publish', 'menu.hint.publish'));
+  }
+
+  items.push(
     new inquirer.Separator(),
-    { name: t('menu.openAdmin'), value: 'open:admin' },
-    { name: t('menu.publish'), value: 'publish' },
-    { name: t('menu.exit'), value: 'exit' },
+    choice('menu.exit', 'exit', 'menu.hint.exit')
+  );
+
+  return assignShortcuts(items);
+}
+
+function parseEnvFile(projectRoot) {
+  const envPath = path.join(projectRoot, '.env');
+  const env = {};
+  try {
+    if (!fs.existsSync(envPath)) return env;
+    for (const line of fs.readFileSync(envPath, 'utf8').split('\n')) {
+      const m = line.match(/^([A-Z_]+)=(.*)$/);
+      if (m) env[m[1]] = m[2].trim().replace(/^['"]|['"]$/g, '');
+    }
+  } catch {
+    // ignore
+  }
+  return env;
+}
+
+async function probeDatabase(projectRoot) {
+  try {
+    const mysql = require('mysql2/promise');
+    const env = parseEnvFile(projectRoot);
+    const conn = await mysql.createConnection({
+      host: env.DB_HOST || '127.0.0.1',
+      port: Number(env.DB_PORT || 3306),
+      user: env.DB_USER || 'reactpress',
+      password: env.DB_PASSWD || env.DB_PASSWORD || 'reactpress',
+      database: env.DB_DATABASE || 'reactpress',
+      connectTimeout: 2000,
+    });
+    await conn.ping();
+    await conn.end();
+    return true;
+  } catch {
+    return false;
+  }
+}
+
+async function fetchContextStatus(projectRoot) {
+  const apiUrl = loadServerSiteUrl(projectRoot);
+  const [apiOk, dockerOk, dbOk] = await Promise.all([
+    isHttpResponding(apiUrl, 1500),
+    Promise.resolve(isDockerRunning()),
+    probeDatabase(projectRoot),
+  ]);
+  return { apiOk, dbOk, dockerOk };
+}
+
+function printStatusPanel(status) {
+  const on = { on: t('menu.statusOn'), off: t('menu.statusOff') };
+  const db = {
+    on: t('menu.statusReady'),
+    off: t('menu.statusNotReady'),
+    pending: t('menu.statusChecking'),
+  };
+  const docker = { on: t('menu.statusYes'), off: t('menu.statusNo') };
+
+  console.log(sectionHeader(t('menu.statusHeader')));
+  const rows = [
+    [t('menu.statusLabelApi'), statusPill(status.apiOk, on)],
+    [t('menu.statusLabelDb'), statusPill(status.dbOk, db)],
+    [t('menu.statusLabelDocker'), statusPill(status.dockerOk, docker)],
   ];
+  for (const [name, pill] of rows) {
+    console.log(`  ${brand.muted(padRight(name, 10))}  ${pill}`);
+  }
+  console.log('');
 }
 
-async function runMenuAction(action, projectRoot) {
+async function printContextStatus(projectRoot) {
+  const spinner = ora({
+    text: brand.dim(t('menu.statusChecking')),
+    color: 'magenta',
+    spinner: 'dots',
+  }).start();
+  const status = await fetchContextStatus(projectRoot);
+  spinner.stop();
+  printStatusPanel(status);
+  return status;
+}
+
+async function withSpinner(text, fn) {
+  const spinner = ora({ text, color: 'magenta', spinner: 'dots' }).start();
+  try {
+    const result = await fn();
+    spinner.succeed();
+    return result;
+  } catch (err) {
+    spinner.fail();
+    throw err;
+  }
+}
+
+async function runMenuAction(action, projectRoot, project) {
   switch (action) {
     case 'dev':
       console.log(label(t('menu.startingDev')));
       await runDev(projectRoot);
       return false;
     case 'init': {
-      console.log(label(t('menu.initProject')));
-      const result = await ensureProjectEnvironment(projectRoot);
-      console.log(brand.success(result.message || t('menu.done')));
+      const result = await withSpinner(t('menu.initProject'), () =>
+        ensureProjectEnvironment(projectRoot)
+      );
+      console.log(ok(result.message || t('menu.done')));
       return true;
     }
     case 'status':
@@ -67,15 +243,21 @@ async function runMenuAction(action, projectRoot) {
       await runNodeScript(getClientBin(), [], { cwd: projectRoot });
       return false;
     case 'server:start': {
-      const code = await runLifecycleCommand('start', projectRoot);
+      const code = await withSpinner(t('menu.startingApi'), () =>
+        runLifecycleCommand('start', projectRoot)
+      );
       if (code !== 0) process.exit(code);
       return true;
     }
     case 'server:stop':
-      await runLifecycleCommand('stop', projectRoot);
+      await withSpinner(t('menu.stoppingApi'), async () => {
+        await runLifecycleCommand('stop', projectRoot);
+      });
       return true;
     case 'server:restart': {
-      const code = await runLifecycleCommand('restart', projectRoot);
+      const code = await withSpinner(t('menu.restartingApi'), () =>
+        runLifecycleCommand('restart', projectRoot)
+      );
       if (code !== 0) process.exit(code);
       return true;
     }
@@ -92,6 +274,7 @@ async function runMenuAction(action, projectRoot) {
           type: 'list',
           name: 'target',
           message: t('menu.buildTarget'),
+          pageSize: 12,
           choices: buildChoices,
         },
       ]);
@@ -102,10 +285,23 @@ async function runMenuAction(action, projectRoot) {
       await runDockerCommand('start', projectRoot);
       return false;
     case 'docker:up':
-      await runDockerCommand('up', projectRoot);
+      await withSpinner(t('docker.starting'), () => runDockerCommand('up', projectRoot));
       return true;
     case 'docker:stop':
-      await runDockerCommand('down', projectRoot);
+      await withSpinner(t('docker.stopping'), async () => {
+        await runDockerCommand('down', projectRoot);
+      });
+      return true;
+    case 'nginx:up':
+      await withSpinner(t('cli.nginx.up'), async () => {
+        await runNginxCommand('up', projectRoot);
+      });
+      return true;
+    case 'nginx:open':
+      await runNginxCommand('open', projectRoot);
+      return true;
+    case 'nginx:reload':
+      await runNginxCommand('reload', projectRoot);
       return true;
     case 'open:admin': {
       const url = loadClientSiteUrl(projectRoot);
@@ -121,7 +317,6 @@ async function runMenuAction(action, projectRoot) {
       return true;
     }
     case 'exit':
-      console.log(brand.muted(t('menu.goodbye')));
       return false;
     default:
       return true;
@@ -130,7 +325,12 @@ async function runMenuAction(action, projectRoot) {
 
 async function runInteractiveLoop() {
   const projectRoot = ensureOriginalCwd();
-  printBanner();
+  const project = describeProject(projectRoot);
+
+  printBanner({ projectRoot, project });
+  await printContextStatus(projectRoot);
+  console.log(`  ${brand.dim(t('menu.shortcuts'))}`);
+  console.log('');
 
   let loop = true;
   while (loop) {
@@ -138,9 +338,10 @@ async function runInteractiveLoop() {
       {
         type: 'list',
         name: 'action',
-        message: t('menu.prompt'),
-        pageSize: 14,
-        choices: getMenuActions(),
+        message: `${brand.primary(t('menu.actionPrefix'))}  ${brand.dim('›')}`,
+        pageSize: 20,
+        loop: false,
+        choices: getMenuActions(project),
       },
     ]);
 
@@ -150,24 +351,15 @@ async function runInteractiveLoop() {
     }
 
     try {
-      const stay = await runMenuAction(action, projectRoot);
-      if (!stay) {
-        break;
-      }
+      const stay = await runMenuAction(action, projectRoot, project);
+      if (!stay) break;
 
-      if (action !== 'status') {
-        const { again } = await inquirer.prompt([
-          {
-            type: 'confirm',
-            name: 'again',
-            message: t('menu.back'),
-            default: true,
-          },
-        ]);
-        loop = again;
+      if (action !== 'status' && action !== 'doctor') {
+        console.log('');
+        await printContextStatus(projectRoot);
       }
     } catch (err) {
-      console.error(brand.error(`  ${err.message || err}`));
+      console.error(fail(err.message || err));
       const { retry } = await inquirer.prompt([
         {
           type: 'confirm',
@@ -177,8 +369,12 @@ async function runInteractiveLoop() {
         },
       ]);
       loop = retry;
+      if (loop) {
+        console.log('');
+        await printContextStatus(projectRoot);
+      }
     }
   }
 }
 
-module.exports = { runInteractiveLoop, runMenuAction };
+module.exports = { runInteractiveLoop, runMenuAction, getMenuActions };

package/ui/theme.js

@@ -1,25 +1,265 @@
 const chalk = require('chalk');
 
+/**
+ * ReactPress CLI visual identity — a single source of truth so banners,
+ * menus, status, doctor, build output all share the same colours and glyphs.
+ */
+const palette = {
+  primary: '#7C5CFF',
+  accent: '#22D3EE',
+  pink: '#F472B6',
+  green: '#22C55E',
+  amber: '#F59E0B',
+  red: '#EF4444',
+  gray: '#6B7280',
+  dim: '#9CA3AF',
+};
+
 const brand = {
-  primary: chalk.hex('#6366f1'),
-  accent: chalk.hex('#22d3ee'),
-  success: chalk.green,
-  warn: chalk.yellow,
-  error: chalk.red,
-  muted: chalk.gray,
+  primary: chalk.hex(palette.primary),
+  accent: chalk.hex(palette.accent),
+  pink: chalk.hex(palette.pink),
+  success: chalk.hex(palette.green),
+  warn: chalk.hex(palette.amber),
+  error: chalk.hex(palette.red),
+  muted: chalk.hex(palette.gray),
+  dim: chalk.hex(palette.dim),
   bold: chalk.bold,
 };
 
+const icon = {
+  ok: brand.success('✓'),
+  fail: brand.error('✗'),
+  warn: brand.warn('⚠'),
+  info: brand.accent('ℹ'),
+  arrow: brand.primary('›'),
+  pointer: brand.primary('▸'),
+  bullet: brand.muted('·'),
+  dotOn: brand.success('●'),
+  dotOff: brand.muted('○'),
+  dotPending: brand.warn('◐'),
+  dotInfo: brand.accent('●'),
+  spark: brand.primary('✱'),
+  link: brand.muted('↗'),
+};
+
+/**
+ * Whether a Unicode code point should occupy two terminal cells.
+ *
+ * Covers the common "East Asian Wide / Full-width" ranges that show up in
+ * Chinese / Japanese / Korean text plus full-width punctuation. We
+ * deliberately do not pull in a heavy dependency like `string-width` to keep
+ * the CLI's startup cheap.
+ */
+function isWideCodePoint(cp) {
+  return (
+    (cp >= 0x1100 && cp <= 0x115f) ||
+    (cp >= 0x2e80 && cp <= 0x303e) ||
+    (cp >= 0x3041 && cp <= 0x33ff) ||
+    (cp >= 0x3400 && cp <= 0x4dbf) ||
+    (cp >= 0x4e00 && cp <= 0x9fff) ||
+    (cp >= 0xa000 && cp <= 0xa4cf) ||
+    (cp >= 0xac00 && cp <= 0xd7a3) ||
+    (cp >= 0xf900 && cp <= 0xfaff) ||
+    (cp >= 0xfe30 && cp <= 0xfe4f) ||
+    (cp >= 0xff00 && cp <= 0xff60) ||
+    (cp >= 0xffe0 && cp <= 0xffe6) ||
+    (cp >= 0x1f300 && cp <= 0x1f64f) ||
+    (cp >= 0x1f900 && cp <= 0x1f9ff) ||
+    (cp >= 0x20000 && cp <= 0x2fffd) ||
+    (cp >= 0x30000 && cp <= 0x3fffd)
+  );
+}
+
+/**
+ * Visible terminal-cell width of a string, after stripping ANSI colour codes
+ * and accounting for East Asian wide characters (which occupy 2 cells).
+ */
+function visibleLength(text) {
+  const stripped = String(text)
+    .replace(/\u001b\[[0-9;]*m/g, '')
+    .replace(/\u001b\]8;[^\u0007\u001b]*(?:\u0007|\u001b\\)/g, '');
+  let width = 0;
+  for (const ch of stripped) {
+    const cp = ch.codePointAt(0);
+    if (cp === undefined) continue;
+    if (cp < 0x20 || (cp >= 0x7f && cp < 0xa0)) continue;
+    width += isWideCodePoint(cp) ? 2 : 1;
+  }
+  return width;
+}
+
+function padRight(text, width) {
+  const len = visibleLength(text);
+  if (len >= width) return text;
+  return text + ' '.repeat(width - len);
+}
+
+function padLeft(text, width) {
+  const len = visibleLength(text);
+  if (len >= width) return text;
+  return ' '.repeat(width - len) + text;
+}
+
+function terminalWidth(fallback = 80) {
+  const cols = Number(process.stdout.columns) || fallback;
+  return Math.max(48, Math.min(120, cols));
+}
+
+function divider(width = 44, char = '─', colorize = brand.muted) {
+  return colorize(char.repeat(width));
+}
+
+/**
+ * Cyberpunk-flavoured progress-bar style decoration.
+ * `filled` segments use the primary colour, the trailing track stays muted.
+ */
+function pulseBar(width = 24, filled = Math.ceil(width * 0.7)) {
+  const f = Math.max(0, Math.min(width, filled));
+  const head = brand.primary('▰'.repeat(f));
+  const tail = brand.muted('▱'.repeat(Math.max(0, width - f)));
+  return `${head}${tail}`;
+}
+
+/**
+ * Three-light status indicator used in the top-right of the banner.
+ * Mimics the running-light cluster you'd see on a server rack.
+ */
+function statusLights(state = 'online') {
+  if (state === 'offline') {
+    return `${brand.muted('●')} ${brand.muted('●')} ${brand.muted('●')}`;
+  }
+  if (state === 'pending') {
+    return `${brand.warn('●')} ${brand.warn('●')} ${brand.muted('○')}`;
+  }
+  return `${brand.success('●')} ${brand.warn('●')} ${brand.muted('○')}`;
+}
+
+function hex2rgb(h) {
+  const s = h.replace('#', '');
+  return {
+    r: parseInt(s.substring(0, 2), 16),
+    g: parseInt(s.substring(2, 4), 16),
+    b: parseInt(s.substring(4, 6), 16),
+  };
+}
+
+function rgb2hex(r, g, b) {
+  const pad = (n) => n.toString(16).padStart(2, '0');
+  return `#${pad(r)}${pad(g)}${pad(b)}`;
+}
+
+function mixHex(a, b, t) {
+  const pa = hex2rgb(a);
+  const pb = hex2rgb(b);
+  const r = Math.round(pa.r + (pb.r - pa.r) * t);
+  const g = Math.round(pa.g + (pb.g - pa.g) * t);
+  const bl = Math.round(pa.b + (pb.b - pa.b) * t);
+  return rgb2hex(r, g, bl);
+}
+
+/**
+ * Paint a string with a left→right linear gradient across `colors` (hex).
+ * Falls back to plain text when stdout does not support truecolor.
+ */
+function gradientText(text, colors = [palette.primary, palette.accent], { bold = false } = {}) {
+  if (!text) return '';
+  const supports = chalk.supportsColor && chalk.supportsColor.has16m;
+  if (!supports || colors.length < 2) {
+    const c = chalk.hex(colors[0] || palette.primary);
+    return bold ? c.bold(text) : c(text);
+  }
+  const chars = [...String(text)];
+  const n = Math.max(chars.length - 1, 1);
+  return chars
+    .map((ch, i) => {
+      const ratio = i / n;
+      const idx = ratio * (colors.length - 1);
+      const lo = Math.floor(idx);
+      const hi = Math.min(colors.length - 1, lo + 1);
+      const local = idx - lo;
+      const c = chalk.hex(mixHex(colors[lo], colors[hi], local));
+      return bold ? c.bold(ch) : c(ch);
+    })
+    .join('');
+}
+
 function label(text) {
-  return brand.primary(`› ${text}`);
+  return `${icon.arrow} ${brand.primary(text)}`;
 }
 
 function ok(text) {
-  return brand.success(`✓ ${text}`);
+  return `${icon.ok} ${brand.success(text)}`;
 }
 
 function fail(text) {
-  return brand.error(`✗ ${text}`);
+  return `${icon.fail} ${brand.error(text)}`;
+}
+
+function warn(text) {
+  return `${icon.warn} ${brand.warn(text)}`;
+}
+
+function info(text) {
+  return `${icon.info} ${brand.accent(text)}`;
+}
+
+function chip(text, color = brand.primary) {
+  return color(`[ ${text} ]`);
+}
+
+function kv(key, value, { keyWidth = 10, valueColor = (s) => s } = {}) {
+  return `${brand.muted(padRight(key, keyWidth))}  ${valueColor(value)}`;
 }
 
-module.exports = { brand, label, ok, fail };
+/**
+ * Render a 3-state status pill, e.g. `● online` / `○ offline` / `◐ pending`.
+ *
+ * @param {boolean | 'pending'} state
+ * @param {{ on?: string, off?: string, pending?: string }} labels
+ */
+function statusPill(state, labels = {}) {
+  if (state === 'pending') {
+    return `${icon.dotPending} ${brand.warn(labels.pending || 'pending')}`;
+  }
+  if (state === true) {
+    return `${icon.dotOn} ${brand.success(labels.on || 'online')}`;
+  }
+  return `${icon.dotOff} ${brand.dim(labels.off || 'offline')}`;
+}
+
+/**
+ * Render a single-line section header: ` ── Title ────────────`.
+ */
+function sectionHeader(title, { width } = {}) {
+  const w = width ?? terminalWidth();
+  const prefix = brand.muted('── ');
+  const t = brand.bold(brand.primary(title));
+  const usedLen = visibleLength(prefix) + visibleLength(t) + 2;
+  const fillLen = Math.max(3, w - usedLen - 2);
+  const fill = brand.muted('─'.repeat(fillLen));
+  return ` ${prefix}${t} ${fill}`;
+}
+
+module.exports = {
+  palette,
+  brand,
+  icon,
+  label,
+  ok,
+  fail,
+  warn,
+  info,
+  chip,
+  kv,
+  statusPill,
+  sectionHeader,
+  visibleLength,
+  padRight,
+  padLeft,
+  terminalWidth,
+  divider,
+  gradientText,
+  pulseBar,
+  statusLights,
+};