blok0 0.1.1 → 0.1.3

package/src/handlers/login.ts

@@ -1,6 +1,7 @@
 import { isAuthenticated, clearCredentials, storeAccessToken, AuthCallback } from '../auth';
 import { AuthServer } from '../auth/server';
 import open from 'open';
+import { withSpinner, log, showSection, EMOJIS } from '../ui';
 
 // Add SIGINT handler for graceful cleanup
 process.on('SIGINT', () => {
@@ -15,13 +16,15 @@ export async function handleLogin(token?: string, manual?: boolean): Promise<voi
   // Direct token authentication (CI/CD)
   if (token) {
     try {
-      console.log('🔐 Saving authentication token...');
-      await storeAccessToken(token);
-      console.log('✅ Successfully authenticated!');
+      await withSpinner(
+        'Saving authentication token',
+        () => storeAccessToken(token),
+        { emoji: EMOJIS.LOCK, successText: 'Successfully authenticated!' }
+      );
       console.log('');
-      console.log('You can now use blok0 commands that require authentication.');
+      log.info('You can now use blok0 commands that require authentication.');
     } catch (error) {
-      console.error('❌ Failed to save authentication token:', (error as Error).message);
+      log.error('Failed to save authentication token: ' + (error as Error).message);
       process.exit(1);
     }
     return;
@@ -49,36 +52,40 @@ export async function handleLogin(token?: string, manual?: boolean): Promise<voi
  * Handle browser-based authentication flow
  */
 async function handleBrowserLogin(): Promise<void> {
-  console.log('🔐 Blok0 Authentication');
-  console.log('======================');
-  console.log('');
+  showSection('🔐 Blok0 Authentication', EMOJIS.LOCK);
 
   // Create authentication server
   const authServer = new AuthServer();
 
   try {
     // Initialize server (find available port)
-    console.log('🚀 Starting authentication server...');
-    await authServer.initialize();
+    await withSpinner(
+      'Starting authentication server',
+      () => authServer.initialize(),
+      { emoji: EMOJIS.ROCKET }
+    );
 
     // Get the authorization URL (now port is available)
     const authUrl = authServer.getAuthorizationUrl();
 
-    console.log('🌐 Opening browser for authentication...');
+    log.info('Opening browser for authentication...');
     await open(authUrl);
 
-    console.log('📱 Please complete authentication in your browser.');
-    console.log('⏳ Waiting for authentication to complete...');
+    log.info('Please complete authentication in your browser.');
+    log.plain('⏳ Waiting for authentication to complete...');
 
     // Start server and wait for callback
     const authCallback: AuthCallback = await authServer.start();
 
     // Store the token
-    console.log('🔐 Saving authentication token...');
-    await storeAccessToken(authCallback.token);
-    console.log('✅ Successfully authenticated!');
+    await withSpinner(
+      'Saving authentication token',
+      () => storeAccessToken(authCallback.token),
+      { emoji: EMOJIS.LOCK, successText: 'Successfully authenticated!' }
+    );
+
     console.log('');
-    console.log('You can now use blok0 commands that require authentication.');
+    log.info('You can now use blok0 commands that require authentication.');
 
   } catch (error) {
     authServer.stop();
@@ -90,23 +97,21 @@ async function handleBrowserLogin(): Promise<void> {
  * Show manual authentication instructions
  */
 function showManualInstructions(): void {
-  console.log('🔐 Blok0 Manual Authentication');
-  console.log('==============================');
-  console.log('');
+  showSection('🔐 Blok0 Manual Authentication', EMOJIS.LOCK);
   console.log('To authenticate with the Blok0 API, make a POST request to:');
   console.log('https://www.blok0.xyz/api/customers/login');
   console.log('');
-  console.log('Example using curl:');
+  log.info('Example using curl:');
   console.log('curl -X POST https://www.blok0.xyz/api/customers/login \\');
   console.log('  -H "Content-Type: application/json" \\');
   console.log('  -d \'{"email": "your-email@example.com", "password": "your-password"}\'');
   console.log('');
-  console.log('Then copy the access token and run:');
+  log.info('Then copy the access token and run:');
   console.log('blok0 login --token <your-token>');
   console.log('');
-  console.log('For CI/CD environments, set the BLOK0_TOKEN environment variable.');
+  log.info('For CI/CD environments, set the BLOK0_TOKEN environment variable.');
   console.log('');
-  console.log('💡 For browser-based login, run: blok0 login');
+  log.info('For browser-based login, run: blok0 login');
 }
 
 /**
@@ -114,17 +119,23 @@ function showManualInstructions(): void {
  */
 export async function handleLogout(): Promise<void> {
   try {
-    const wasAuthenticated = await isAuthenticated();
+    const wasAuthenticated = await withSpinner(
+      'Checking authentication status',
+      () => isAuthenticated()
+    );
 
     if (!wasAuthenticated) {
-      console.log('You are not currently logged in.');
+      log.warning('You are not currently logged in.');
       return;
     }
 
-    await clearCredentials();
-    console.log('✅ Successfully logged out and cleared stored credentials.');
+    await withSpinner(
+      'Clearing stored credentials',
+      () => clearCredentials(),
+      { emoji: EMOJIS.LOCK, successText: 'Successfully logged out and cleared stored credentials.' }
+    );
   } catch (error) {
-    console.error('❌ Failed to logout:', (error as Error).message);
+    log.error('Failed to logout: ' + (error as Error).message);
     process.exit(1);
   }
 }

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,11 +44,14 @@ 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
   blok0 generate starter my-project
-  blok0 add block https://api.example.com/blocks/123
+  blok0 add block https://www.blok0.com/api/cli/sections/123
 
 For more information, visit: https://github.com/blok0-payload/cli
 `);
@@ -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,9 +123,9 @@ async function main() {
       case 'add':
         const [addSubcommand, ...addRestArgs] = restArgs;
         if (addSubcommand === 'block') {
-          const blockUrl = addRestArgs[0];
+          const blockUrl = `https://www.blok0.com/api/cli/sections/${addRestArgs[0]}`;
           if (!blockUrl) {
-            console.error('Error: Block URL is required. Use: blok0 add block <url>');
+            console.error('Error: Block Slug is required. Use: blok0 add block <slug>');
             process.exit(1);
           }
           const options = {
@@ -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}`);
+  });
+}

package/tsconfig.json

@@ -1,16 +1,16 @@
-{
-  "compilerOptions": {
-    "target": "ES2022",
-    "module": "commonjs",
-    "outDir": "./dist",
-    "rootDir": "./src",
-    "strict": true,
-    "esModuleInterop": true,
-    "skipLibCheck": true,
-    "forceConsistentCasingInFileNames": true,
-    "declaration": true,
-    "resolveJsonModule": true
-  },
-  "include": ["src/**/*.ts"],
-  "exclude": ["node_modules", "dist", "src/templates/**"]
-}
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "module": "commonjs",
+    "outDir": "./dist",
+    "rootDir": "./src",
+    "strict": true,
+    "esModuleInterop": true,
+    "skipLibCheck": true,
+    "forceConsistentCasingInFileNames": true,
+    "declaration": true,
+    "resolveJsonModule": true
+  },
+  "include": ["src/**/*.ts"],
+  "exclude": ["node_modules", "dist", "src/templates/**"]
+}