fabrica-e-commerce 0.1.17 → 0.2.2

package/src/ui.js

@@ -1,60 +1,50 @@
 import process from 'node:process';
 import boxen from 'boxen';
-
-// ── colors ────────────────────────────────────────────────────────────────────
-const ESC = '\x1b[';
-export const orange    = (t) => `${ESC}38;2;255;138;0m${t}${ESC}0m`;
-export const dimOrange = (t) => `${ESC}38;2;182;95;0m${t}${ESC}0m`;
-export const bold      = (t) => `${ESC}1m${t}${ESC}0m`;
-export const red       = (t) => `${ESC}38;2;220;50;50m${t}${ESC}0m`;
-export const dim       = (t) => `${ESC}2m${t}${ESC}0m`;
-export const green     = (t) => `${ESC}38;2;80;200;80m${t}${ESC}0m`;
+import chalk from 'chalk';
+import gradient from 'gradient-string';
+import figures from 'figures';
+
+// ── palette ───────────────────────────────────────────────────────────────────
+export const orange    = (t) => chalk.hex('#ff8a00')(t);
+export const dimOrange = (t) => chalk.hex('#b65f00')(t);
+export const bold      = (t) => chalk.bold(t);
+export const red       = (t) => chalk.hex('#dc3232')(t);
+export const dim       = (t) => chalk.dim(t);
+export const green     = (t) => chalk.hex('#50c850')(t);
+export const cyan      = (t) => chalk.hex('#00c8ff')(t);
+export const yellow    = (t) => chalk.hex('#ffc846')(t);
+export const gray      = (t) => chalk.hex('#888888')(t);
+export const white     = (t) => chalk.white(t);
 
 // strip ANSI for length calculations
 function stripAnsi(s) { return s.replace(/\x1b\[[0-9;]*m/g, ''); }
 
 // ── section buffer ─────────────────────────────────────────────────────────────
-// Each section accumulates lines, then flushes as ONE boxen box when the
-// next section (or flushSection) is called.
 let _currentTitle = null;
-let _lines = [];          // raw strings (may contain ANSI)
+let _lines = [];
 let _sectionCount = 0;
-let _isError = false;
 
 function flushSection() {
   if (_currentTitle === null) return;
-
   const content = _lines.join('\n');
   const rendered = boxen(content || ' ', {
-    title: bold(orange(_currentTitle)),
+    title: ` ${bold(orange(_currentTitle))} `,
     titleAlignment: 'left',
-    padding: { top: 0, bottom: 0, left: 1, right: 1 },
+    padding: { top: 0, bottom: 0, left: 2, right: 2 },
     margin: { top: 0, bottom: 0, left: 0, right: 0 },
     borderStyle: 'round',
     borderColor: '#ff8a00',
   });
-
-  if (_sectionCount > 1) console.log(orange('  │'));
+  if (_sectionCount > 1) console.log(dimOrange('  │'));
   console.log(rendered);
-
   _currentTitle = null;
   _lines = [];
-  _isError = false;
-}
-
-// Add a line into the current section buffer
-function addLine(text) {
-  _lines.push(text);
 }
 
-export function resetSectionCount() {
-  flushSection();
-  _sectionCount = 0;
-}
+function addLine(text) { _lines.push(text); }
 
-// ── public API ────────────────────────────────────────────────────────────────
+export function resetSectionCount() { flushSection(); _sectionCount = 0; }
 
-// Start a new named section (flushes previous one)
 export function section(title) {
   flushSection();
   _sectionCount++;
@@ -62,49 +52,56 @@ export function section(title) {
   _lines = [];
 }
 
-// Force-flush the current section (call at end of a command)
-export function endSections() {
-  flushSection();
-}
+export function endSections() { flushSection(); }
 
-// kv row inside current section
 export function kv(key, value) {
-  addLine(`  ${dimOrange('›')} ${bold(key)} ${dimOrange('→')} ${value}`);
+  const k = bold(orange(key));
+  const arrow = dimOrange(figures.arrowRight);
+  const v = typeof value === 'string' && value.startsWith('http') ? cyan(value) : white(String(value));
+  addLine(`   ${dimOrange(figures.pointer)} ${k} ${arrow} ${v}`);
+}
+
+export function kvSuccess(key, value) {
+  addLine(`   ${green(figures.tick)} ${bold(key)} ${dimOrange(figures.arrowRight)} ${green(String(value))}`);
+}
+
+export function kvFail(key, value) {
+  addLine(`   ${red(figures.cross)} ${bold(key)} ${dimOrange(figures.arrowRight)} ${red(String(value))}`);
 }
 
-// spinner — writes inline to stdout while running, then adds result line to buffer
+// spinner — inline stdout, then adds result line to buffer
 const CLEAR_LINE = '\x1b[K';
 export function spinner(text) {
-  process.stdout.write(`  ${dimOrange('○')} ${text}`);
+  process.stdout.write(`   ${dimOrange(figures.ellipsis)} ${dim(text)}`);
   return {
     succeed(msg) {
       process.stdout.write(`\r${CLEAR_LINE}`);
-      addLine(`  ${orange('✓')} ${msg}`);
+      addLine(`   ${green(figures.tick)} ${msg}`);
     },
     fail(msg) {
       process.stdout.write(`\r${CLEAR_LINE}`);
-      addLine(`  ${red('✗')} ${msg}`);
+      addLine(`   ${red(figures.cross)} ${msg}`);
     },
   };
 }
 
-// plain log inside current section
-export function log(text) {
-  addLine(`  ${text}`);
-}
+export function log(text) { addLine(`   ${dim(figures.line)} ${text}`); }
+export function logInfo(text) { addLine(`   ${cyan(figures.info)} ${text}`); }
+export function logWarn(text) { addLine(`   ${yellow(figures.warning)} ${yellow(text)}`); }
+
+export function divider() { addLine(`   ${dimOrange('─'.repeat(48))}`); }
 
-// sub-step block (e.g. raw Vercel output) — indented, dimmer border
+// sub-step block
 export function subBox(lines, { isError = false } = {}) {
   if (!lines || !lines.length) return;
-  const colored = isError ? lines.map((l) => red(l)) : lines.map((l) => dimOrange(l));
+  const colored = isError ? lines.map((l) => red(l)) : lines.map((l) => dim(l));
   const content = colored.join('\n');
   const rendered = boxen(content, {
-    padding: { top: 0, bottom: 0, left: 1, right: 1 },
-    margin: { top: 0, bottom: 0, left: 2, right: 0 },
+    padding: { top: 0, bottom: 0, left: 2, right: 2 },
+    margin: { top: 0, bottom: 0, left: 3, right: 0 },
     borderStyle: 'single',
     borderColor: isError ? '#dc3232' : '#b65f00',
   });
-  // add each rendered line into buffer so it stays inside the section box
   for (const line of rendered.split('\n')) addLine(line);
 }
 
@@ -116,55 +113,85 @@ export function banner() {
   _lines = [];
 
   const art = [
-    '███████╗ █████╗ ██████╗ ██████╗ ██╗ ██████╗ █████╗ ',
+    '███████╗ █████╗ ██████╗ ██████╗ ██╗ ██████╗ █████╗',
     '██╔════╝██╔══██╗██╔══██╗██╔══██╗██║██╔════╝██╔══██╗',
     '█████╗  ███████║██████╔╝██████╔╝██║██║     ███████║',
     '██╔══╝  ██╔══██║██╔══██╗██╔══██╗██║██║     ██╔══██║',
     '██║     ██║  ██║██████╔╝██║  ██║██║╚██████╗██║  ██║',
     '╚═╝     ╚═╝  ╚═╝╚═════╝ ╚═╝  ╚═╝╚═╝ ╚═════╝╚═╝  ╚═╝',
-  ].map((l) => orange(l)).join('\n');
+  ];
+
+  const gradientArt = gradient(['#ff8a00', '#ff4500', '#ff8a00'])(art.join('\n'));
 
   const subtitle = [
-    dimOrange('CMD → OAUTH BRIDGE // SUPABASE + VERCEL DEPLOYER'),
-    dim('by SPARROW AI SOLUTION'),
+    cyan('  Supabase + Vercel   ·   Deploy in minutes'),
+    dim('  by SPARROW AI SOLUTION'),
   ].join('\n');
 
-  console.log(boxen(`${art}\n\n${subtitle}`, {
-    padding: { top: 0, bottom: 0, left: 1, right: 1 },
+  console.log(boxen(`${gradientArt}\n\n${subtitle}`, {
+    padding: { top: 1, bottom: 1, left: 3, right: 3 },
     borderStyle: 'double',
     borderColor: '#ff8a00',
+    textAlignment: 'center',
   }));
 }
 
 // ── help ──────────────────────────────────────────────────────────────────────
 export function help() {
   banner();
+
+  const commands = [
+    { cmd: 'build',  desc: 'Connect Supabase · collect secrets · deploy or run locally' },
+    { cmd: 'list',   desc: 'Show all Fabrica projects (local & cloud)' },
+    { cmd: 'env',    desc: 'View and update environment variables for any project' },
+    { cmd: 'rerun',  desc: 'Re-run or re-open an existing project' },
+    { cmd: 'vins',   desc: 'Verify & auto-install CLI dependencies (git, gh, vercel)' },
+    { cmd: 'clean',  desc: 'Remove local data, env files, or logout from Vercel / GitHub' },
+    { cmd: 'info',   desc: 'Package, bridge, repo and storage info' },
+    { cmd: 'help',   desc: 'Show this help screen' },
+  ];
+
+  const cmdRows = commands.map(({ cmd, desc }) =>
+    `   ${bold(orange(cmd.padEnd(10)))}  ${dim(desc)}`
+  ).join('\n');
+
+  const examples = [
+    `   ${dimOrange('$')} npx fabrica-e-commerce build`,
+    `   ${dimOrange('$')} npx fabrica-e-commerce vins`,
+    `   ${dimOrange('$')} npx fabrica-e-commerce list`,
+    `   ${dimOrange('$')} npx fabrica-e-commerce clean`,
+    `   ${dimOrange('$')} npx fabrica-e-commerce env`,
+    `   ${dimOrange('$')} npx fabrica-e-commerce rerun`,
+  ].join('\n');
+
   const content = [
-    bold(orange('Commands')),
+    bold(orange(' Commands')),
+    dimOrange('  ' + '─'.repeat(52)),
     '',
-    `  ${bold('build')}    Connect Supabase, collect secrets, deploy or run locally`,
-    `  ${bold('list')}     Show Fabrica projects (local & cloud)`,
-    `  ${bold('env')}      View and update environment variables for any project`,
-    `  ${bold('rerun')}    Re-run or re-open an existing project`,
-    `  ${bold('vins')}     Verify & auto-install CLI dependencies`,
-    `  ${bold('info')}     Package, bridge, repo and storage info`,
-    `  ${bold('help')}     Show this screen`,
+    cmdRows,
     '',
-    bold(orange('Examples')),
+    bold(orange(' Examples')),
+    dimOrange('  ' + '─'.repeat(52)),
     '',
-    `  ${dimOrange('$')} npx fabrica-e-commerce build`,
-    `  ${dimOrange('$')} npx fabrica-e-commerce env`,
-    `  ${dimOrange('$')} npx fabrica-e-commerce rerun`,
-    `  ${dimOrange('$')} npx fabrica-e-commerce list`,
+    examples,
     '',
-    dim('Creator: SPARROW AI SOLUTION'),
+    dim(`  Creator: SPARROW AI SOLUTION   ·   MIT License`),
   ].join('\n');
-  console.log(orange('  │'));
+
+  console.log(dimOrange('  │'));
   console.log(boxen(content, {
-    title: bold(orange('Help')),
+    title: ` ${bold(orange('Help & Commands'))} `,
     titleAlignment: 'left',
-    padding: { top: 0, bottom: 0, left: 1, right: 1 },
+    padding: { top: 1, bottom: 1, left: 1, right: 1 },
     borderStyle: 'round',
     borderColor: '#ff8a00',
   }));
 }
+
+// ── step progress ─────────────────────────────────────────────────────────────
+export function stepHeader(step, total, title) {
+  endSections();
+  const badge = orange(`[${step}/${total}]`);
+  const line = `${badge} ${bold(white(title))}`;
+  console.log(`\n  ${dimOrange(figures.arrowRight)} ${line}`);
+}