@husar.ai/cli 0.4.3 → 0.4.4

package/src/ui.ts

@@ -0,0 +1,260 @@
+/**
+ * UI utilities for beautiful CLI output
+ */
+
+import chalk from 'chalk';
+import boxen from 'boxen';
+import ora, { Ora } from 'ora';
+import logSymbols from 'log-symbols';
+import Enquirer from 'enquirer';
+
+// ═══════════════════════════════════════════════════════════════════════════
+// COLORS & THEME
+// ═══════════════════════════════════════════════════════════════════════════
+
+export const theme = {
+  primary: chalk.hex('#6366f1'), // Indigo
+  secondary: chalk.hex('#8b5cf6'), // Purple
+  success: chalk.hex('#22c55e'), // Green
+  warning: chalk.hex('#f59e0b'), // Amber
+  error: chalk.hex('#ef4444'), // Red
+  info: chalk.hex('#3b82f6'), // Blue
+  muted: chalk.gray,
+  bold: chalk.bold,
+  dim: chalk.dim,
+  link: chalk.cyan.underline,
+};
+
+// ═══════════════════════════════════════════════════════════════════════════
+// BANNER
+// ═══════════════════════════════════════════════════════════════════════════
+
+const HUSAR_LOGO = `
+ ██╗  ██╗██╗   ██╗███████╗ █████╗ ██████╔╗ 
+ ██║  ██║██║   ██║██╔════╝██╔══██╗██╔══██╗
+ ███████║██║   ██║███████╗███████║██████╔╝
+ ██╔══██║██║   ██║╚════██║██╔══██║██╔══██╗
+ ██║  ██║╚██████╔╝███████║██║  ██║██║  ██║
+ ╚═╝  ╚═╝ ╚═════╝ ╚══════╝╚═╝  ╚═╝╚═╝  ╚═╝`;
+
+export function printBanner(subtitle?: string): void {
+  const gradient = HUSAR_LOGO.split('\n')
+    .map((line, i) => {
+      const colors = ['#818cf8', '#8b5cf6', '#a855f7', '#c084fc', '#d8b4fe', '#e9d5ff'];
+      return chalk.hex(colors[i % colors.length])(line);
+    })
+    .join('\n');
+
+  console.log(gradient);
+  console.log();
+  console.log(theme.muted('  Headless CMS for Modern Developers'));
+  if (subtitle) {
+    console.log(theme.primary(`  ${subtitle}`));
+  }
+  console.log();
+}
+
+export function printCompactBanner(): void {
+  console.log();
+  console.log(chalk.bold(theme.primary('  HUSAR.AI')) + theme.muted(' • Headless CMS'));
+  console.log();
+}
+
+// ═══════════════════════════════════════════════════════════════════════════
+// BOXES
+// ═══════════════════════════════════════════════════════════════════════════
+
+export function box(content: string, title?: string): void {
+  console.log(
+    boxen(content, {
+      padding: 1,
+      margin: { top: 1, bottom: 1, left: 0, right: 0 },
+      borderStyle: 'round',
+      borderColor: '#6366f1',
+      title: title,
+      titleAlignment: 'left',
+    }),
+  );
+}
+
+export function successBox(content: string, title = 'Success'): void {
+  console.log(
+    boxen(content, {
+      padding: 1,
+      margin: { top: 1, bottom: 1, left: 0, right: 0 },
+      borderStyle: 'round',
+      borderColor: '#22c55e',
+      title: `${logSymbols.success} ${title}`,
+      titleAlignment: 'left',
+    }),
+  );
+}
+
+export function errorBox(content: string, title = 'Error'): void {
+  console.log(
+    boxen(content, {
+      padding: 1,
+      margin: { top: 1, bottom: 1, left: 0, right: 0 },
+      borderStyle: 'round',
+      borderColor: '#ef4444',
+      title: `${logSymbols.error} ${title}`,
+      titleAlignment: 'left',
+    }),
+  );
+}
+
+export function infoBox(content: string, title = 'Info'): void {
+  console.log(
+    boxen(content, {
+      padding: 1,
+      margin: { top: 1, bottom: 1, left: 0, right: 0 },
+      borderStyle: 'round',
+      borderColor: '#3b82f6',
+      title: `${logSymbols.info} ${title}`,
+      titleAlignment: 'left',
+    }),
+  );
+}
+
+// ═══════════════════════════════════════════════════════════════════════════
+// SPINNERS
+// ═══════════════════════════════════════════════════════════════════════════
+
+export function spinner(text: string): Ora {
+  return ora({
+    text,
+    color: 'magenta',
+    spinner: 'dots',
+  }).start();
+}
+
+// ═══════════════════════════════════════════════════════════════════════════
+// LOG MESSAGES
+// ═══════════════════════════════════════════════════════════════════════════
+
+export const log = {
+  success: (message: string) => console.log(`${logSymbols.success} ${theme.success(message)}`),
+  error: (message: string) => console.log(`${logSymbols.error} ${theme.error(message)}`),
+  warning: (message: string) => console.log(`${logSymbols.warning} ${theme.warning(message)}`),
+  info: (message: string) => console.log(`${logSymbols.info} ${theme.info(message)}`),
+  step: (message: string) => console.log(`  ${theme.primary('→')} ${message}`),
+  substep: (message: string) => console.log(`    ${theme.muted('•')} ${message}`),
+  done: (message: string) => console.log(`  ${theme.success('✓')} ${message}`),
+  fail: (message: string) => console.log(`  ${theme.error('✗')} ${message}`),
+  dim: (message: string) => console.log(theme.dim(`  ${message}`)),
+  blank: () => console.log(),
+};
+
+// ═══════════════════════════════════════════════════════════════════════════
+// PROMPTS (using Enquirer)
+// ═══════════════════════════════════════════════════════════════════════════
+
+interface SelectChoice {
+  name: string;
+  message: string;
+  hint?: string;
+}
+
+const enquirer = new Enquirer();
+
+export async function select<T extends string>(message: string, choices: SelectChoice[]): Promise<T> {
+  const response = (await enquirer.prompt({
+    type: 'select',
+    name: 'value',
+    message: theme.primary(message),
+    choices: choices.map((c) => ({
+      name: c.name,
+      message: c.message,
+      hint: c.hint ? theme.dim(c.hint) : undefined,
+    })),
+  })) as { value: T };
+  return response.value;
+}
+
+export async function input(message: string, defaultValue?: string): Promise<string> {
+  const response = (await enquirer.prompt({
+    type: 'input',
+    name: 'value',
+    message: theme.primary(message),
+    initial: defaultValue,
+  })) as { value: string };
+  return response.value;
+}
+
+export async function confirm(message: string, defaultValue = true): Promise<boolean> {
+  const response = (await enquirer.prompt({
+    type: 'confirm',
+    name: 'value',
+    message: theme.primary(message),
+    initial: defaultValue,
+  })) as { value: boolean };
+  return response.value;
+}
+
+export async function password(message: string): Promise<string> {
+  const response = (await enquirer.prompt({
+    type: 'password',
+    name: 'value',
+    message: theme.primary(message),
+  })) as { value: string };
+  return response.value;
+}
+
+// ═══════════════════════════════════════════════════════════════════════════
+// TABLES & LISTS
+// ═══════════════════════════════════════════════════════════════════════════
+
+export function list(items: string[], title?: string): void {
+  if (title) {
+    console.log(chalk.bold(title));
+  }
+  items.forEach((item) => {
+    console.log(`  ${theme.primary('•')} ${item}`);
+  });
+}
+
+export function keyValue(pairs: Record<string, string | undefined>, title?: string): void {
+  if (title) {
+    console.log(chalk.bold(title));
+  }
+  const maxKeyLen = Math.max(...Object.keys(pairs).map((k) => k.length));
+  Object.entries(pairs).forEach(([key, value]) => {
+    if (value !== undefined) {
+      const paddedKey = key.padEnd(maxKeyLen);
+      console.log(`  ${theme.muted(paddedKey)}  ${value}`);
+    }
+  });
+}
+
+// ═══════════════════════════════════════════════════════════════════════════
+// DIVIDERS
+// ═══════════════════════════════════════════════════════════════════════════
+
+export function divider(char = '─', length = 50): void {
+  console.log(theme.muted(char.repeat(length)));
+}
+
+export function header(text: string): void {
+  console.log();
+  console.log(theme.primary(chalk.bold(text)));
+  divider();
+}
+
+// ═══════════════════════════════════════════════════════════════════════════
+// NEXT STEPS
+// ═══════════════════════════════════════════════════════════════════════════
+
+export function nextSteps(steps: string[], title = 'Next Steps'): void {
+  console.log();
+  console.log(chalk.bold(title));
+  steps.forEach((step, i) => {
+    console.log(`  ${theme.primary(`${i + 1}.`)} ${step}`);
+  });
+  console.log();
+}
+
+// ═══════════════════════════════════════════════════════════════════════════
+// EXPORTS
+// ═══════════════════════════════════════════════════════════════════════════
+
+export { chalk, boxen, ora, logSymbols, Enquirer };