blok0 0.1.2 → 0.1.4

package/src/index.ts

@@ -7,6 +7,7 @@ import { generateStarter } from './handlers/generate';
 import { handleLogin, handleLogout } from './handlers/login';
 import { handleAddBlock } from './handlers/add-block';
 import { createEmptyRegistry } from './registry';
+import { setUIFlags } from './ui';
 
 function prompt(question: string): Promise<string> {
   return new Promise((resolve) => {
@@ -43,6 +44,9 @@ OPTIONS:
   --version, -v            Show version information
   --verbose                Enable verbose logging
   --dry-run                Preview changes without applying them
+  --no-animation           Disable animations and spinners
+  --no-emoji               Disable emoji in output
+  --ci                     Optimize for CI environments (implies --no-animation and --no-emoji)
 
 EXAMPLES:
   blok0 login
@@ -56,18 +60,30 @@ For more information, visit: https://github.com/blok0-payload/cli
 async function main() {
   const args = process.argv.slice(2);
 
-  if (args.length === 0 || args.includes('--help') || args.includes('-h')) {
+  // Parse global UI flags
+  const noAnimation = args.includes('--no-animation');
+  const noEmoji = args.includes('--no-emoji');
+  const ciMode = args.includes('--ci');
+
+  setUIFlags({ noAnimation, noEmoji, ci: ciMode });
+
+  // Filter out global flags from args
+  const filteredArgs = args.filter(arg =>
+    !['--no-animation', '--no-emoji', '--ci'].includes(arg)
+  );
+
+  if (filteredArgs.length === 0 || filteredArgs.includes('--help') || filteredArgs.includes('-h')) {
     showHelp();
     process.exit(0);
   }
 
-  if (args.includes('--version') || args.includes('-v')) {
+  if (filteredArgs.includes('--version') || filteredArgs.includes('-v')) {
     const pkg = require('../package.json');
     console.log(`blok0 v${pkg.version}`);
     process.exit(0);
   }
 
-  const [command, ...restArgs] = args;
+  const [command, ...restArgs] = filteredArgs;
 
   try {
     switch (command) {
@@ -107,7 +123,7 @@ async function main() {
       case 'add':
         const [addSubcommand, ...addRestArgs] = restArgs;
         if (addSubcommand === 'block') {
-          const blockUrl = `https://www.blok0.com/api/cli/sections/${addRestArgs[0]}`;
+          const blockUrl = `https://www.blok0.xyz/api/cli/sections/${addRestArgs[0]}`;
           if (!blockUrl) {
             console.error('Error: Block Slug is required. Use: blok0 add block <slug>');
             process.exit(1);
@@ -118,7 +134,7 @@ async function main() {
           };
           await handleAddBlock(blockUrl, options);
         } else {
-          console.error('Error: Invalid subcommand. Use: blok0 add block <url>');
+          console.error('Error: Invalid subcommand. Use: blok0 add block <slug>');
           process.exit(1);
         }
         break;
@@ -167,16 +183,16 @@ async function handleGenerateStarter(args: string[]) {
 }
 
 async function handleDebug() {
-  console.log('🔍 Blok0 CLI Debug Information');
-  console.log('==============================');
-  console.log('');
+  const { showSection, log, withSpinner, EMOJIS } = await import('./ui');
+
+  showSection('🔍 Blok0 CLI Debug Information', EMOJIS.SEARCH);
 
   // Check stored token
   const { getAccessToken, isAuthenticated } = await import('./auth');
   const token = await getAccessToken();
   const isAuth = await isAuthenticated();
 
-  console.log('🔐 Authentication Status:');
+  log.header('🔐 Authentication Status:');
   console.log(`  Authenticated: ${isAuth ? '✅ Yes' : '❌ No'}`);
   console.log(`  Token Stored: ${token ? '✅ Yes' : '❌ No'}`);
 
@@ -185,25 +201,25 @@ async function handleDebug() {
     console.log(`  Authorization Header: Bearer ${token}`);
   }
 
-  console.log('');
-  console.log('🌐 API Configuration:');
+  log.header('🌐 API Configuration:');
   console.log('  Base URL: https://www.blok0.xyz');
   console.log('  User Agent: blok0-cli/1.0.0');
 
-  console.log('');
-  console.log('🧪 Test API Connection:');
+  log.header('🧪 Test API Connection:');
 
   // Test API connection
   const { apiClient } = await import('./api');
   try {
-    const connectionTest = await apiClient.testConnection();
+    const connectionTest = await withSpinner(
+      'Testing API connection',
+      () => apiClient.testConnection()
+    );
     console.log(`  Connection Test: ${connectionTest ? '✅ Passed' : '❌ Failed'}`);
   } catch (error) {
     console.log(`  Connection Test: ❌ Failed - ${(error as Error).message}`);
   }
 
-  console.log('');
-  console.log('💡 Next Steps:');
+  log.header('💡 Next Steps:');
   console.log('  1. If no token, run: blok0 login');
   console.log('  2. Test API with: blok0 add block <url>');
   console.log('  3. Check server logs for detailed request info');

package/src/ui.ts

@@ -0,0 +1,234 @@
+import ora, { Ora } from 'ora';
+import chalk from 'chalk';
+import { SingleBar } from 'cli-progress';
+
+// Emoji constants for consistent usage
+export const EMOJIS = {
+  SUCCESS: '✅',
+  ERROR: '❌',
+  WARNING: '⚠️',
+  INFO: 'ℹ️',
+  LOCK: '🔐',
+  PACKAGE: '📦',
+  FOLDER: '📁',
+  GEAR: '🔧',
+  SEARCH: '🔍',
+  ROCKET: '🚀',
+  DOWNLOAD: '📥',
+  PARTY: '🎉',
+  WRENCH: '🔧',
+  CHECK: '✅',
+  CROSS: '❌',
+  ARROW: '→',
+} as const;
+
+// Color utilities
+export const colors = {
+  success: chalk.green,
+  error: chalk.red,
+  warning: chalk.yellow,
+  info: chalk.blue,
+  accent: chalk.cyan,
+  muted: chalk.gray,
+};
+
+// Check if we're in a TTY environment
+export const isTTY = process.stdout.isTTY;
+
+// Global flags for disabling features
+export let noAnimation = false;
+export let noEmoji = false;
+export let ciMode = false;
+
+// Set global flags
+export function setUIFlags(flags: { noAnimation?: boolean; noEmoji?: boolean; ci?: boolean }) {
+  noAnimation = flags.noAnimation || ciMode;
+  noEmoji = flags.noEmoji || ciMode;
+  ciMode = flags.ci || false;
+}
+
+// Apply emoji settings to text
+function applyEmoji(text: string, emoji?: string): string {
+  if (noEmoji || !emoji) return text;
+  return `${emoji} ${text}`;
+}
+
+// Spinner wrapper with TTY detection
+export class Spinner {
+  private spinner: Ora | null = null;
+  private startTime: number = 0;
+
+  constructor(private text: string, private emoji?: string) {}
+
+  start(): this {
+    if (!isTTY || noAnimation) {
+      console.log(applyEmoji(this.text, this.emoji));
+      this.startTime = Date.now();
+      return this;
+    }
+
+    this.spinner = ora({
+      text: applyEmoji(this.text, this.emoji),
+      spinner: 'dots',
+    }).start();
+    this.startTime = Date.now();
+    return this;
+  }
+
+  update(text: string, emoji?: string): this {
+    if (!this.spinner) {
+      if (isTTY && !noAnimation) {
+        this.spinner = ora(applyEmoji(text, emoji)).start();
+      } else {
+        console.log(applyEmoji(text, emoji));
+      }
+      return this;
+    }
+
+    this.spinner.text = applyEmoji(text, emoji || this.emoji);
+    return this;
+  }
+
+  succeed(text?: string): this {
+    const duration = this.getDuration();
+    const successText = text || this.text;
+    const durationInfo = duration > 1000 ? ` (${duration}ms)` : '';
+
+    if (this.spinner) {
+      this.spinner.succeed(applyEmoji(successText, EMOJIS.SUCCESS) + durationInfo);
+    } else {
+      console.log(applyEmoji(successText + durationInfo, EMOJIS.SUCCESS));
+    }
+    return this;
+  }
+
+  fail(text?: string): this {
+    const failText = text || this.text;
+    if (this.spinner) {
+      this.spinner.fail(applyEmoji(failText, EMOJIS.ERROR));
+    } else {
+      console.error(applyEmoji(failText, EMOJIS.ERROR));
+    }
+    return this;
+  }
+
+  stop(): this {
+    if (this.spinner) {
+      this.spinner.stop();
+    }
+    return this;
+  }
+
+  private getDuration(): number {
+    return Date.now() - this.startTime;
+  }
+}
+
+// Utility function to wrap async operations with spinner
+export async function withSpinner<T>(
+  text: string,
+  operation: () => Promise<T>,
+  options: { emoji?: string; successText?: string; failText?: string } = {}
+): Promise<T> {
+  const spinner = new Spinner(text, options.emoji);
+  spinner.start();
+
+  try {
+    const result = await operation();
+    spinner.succeed(options.successText);
+    return result;
+  } catch (error) {
+    spinner.fail(options.failText);
+    throw error;
+  }
+}
+
+// Progress bar utilities
+export class ProgressBar {
+  private bar: SingleBar | null = null;
+
+  constructor(private options: {
+    title?: string;
+    total: number;
+    format?: string;
+  }) {}
+
+  start(): this {
+    if (!isTTY || noAnimation) {
+      if (this.options.title) {
+        console.log(this.options.title);
+      }
+      return this;
+    }
+
+    this.bar = new SingleBar({
+      format: this.options.format || '{bar} {percentage}% | {value}/{total} | {eta}s',
+      barCompleteChar: '\u2588',
+      barIncompleteChar: '\u2591',
+      hideCursor: true,
+    });
+
+    if (this.options.title) {
+      console.log(this.options.title);
+    }
+
+    this.bar.start(this.options.total, 0);
+    return this;
+  }
+
+  update(current: number): this {
+    if (this.bar) {
+      this.bar.update(current);
+    } else if (isTTY && !noAnimation) {
+      // Fallback to simple progress if bar not initialized
+      const percent = Math.round((current / this.options.total) * 100);
+      process.stdout.write(`\r${this.options.title || 'Progress'}: ${percent}% (${current}/${this.options.total})`);
+    }
+    return this;
+  }
+
+  increment(amount: number = 1): this {
+    if (this.bar) {
+      this.bar.increment(amount);
+    }
+    return this;
+  }
+
+  stop(): this {
+    if (this.bar) {
+      this.bar.stop();
+    } else if (isTTY && !noAnimation) {
+      process.stdout.write('\n');
+    }
+    return this;
+  }
+}
+
+// Enhanced console methods
+export const log = {
+  success: (text: string) => console.log(colors.success(applyEmoji(text, EMOJIS.SUCCESS))),
+  error: (text: string) => console.error(colors.error(applyEmoji(text, EMOJIS.ERROR))),
+  warning: (text: string) => console.warn(colors.warning(applyEmoji(text, EMOJIS.WARNING))),
+  info: (text: string) => console.log(colors.info(applyEmoji(text, EMOJIS.INFO))),
+  plain: (text: string) => console.log(text),
+  header: (text: string) => console.log(colors.accent(`\n${text}\n`)),
+  step: (step: number, total: number, text: string) => {
+    const stepText = `${step}/${total}`;
+    console.log(colors.muted(`[${stepText}]`) + ' ' + text);
+  },
+};
+
+// Utility to show a section header
+export function showSection(title: string, emoji?: string) {
+  console.log('\n' + colors.accent('='.repeat(50)));
+  console.log(applyEmoji(title, emoji));
+  console.log(colors.accent('='.repeat(50)) + '\n');
+}
+
+// Utility to show next steps
+export function showNextSteps(steps: string[]) {
+  console.log(colors.accent('\nNext steps:'));
+  steps.forEach((step, index) => {
+    console.log(`  ${index + 1}. ${step}`);
+  });
+}