blok0 0.1.2 → 0.1.3

package/dist/ui.js

@@ -0,0 +1,222 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.log = exports.ProgressBar = exports.Spinner = exports.ciMode = exports.noEmoji = exports.noAnimation = exports.isTTY = exports.colors = exports.EMOJIS = void 0;
+exports.setUIFlags = setUIFlags;
+exports.withSpinner = withSpinner;
+exports.showSection = showSection;
+exports.showNextSteps = showNextSteps;
+const ora_1 = __importDefault(require("ora"));
+const chalk_1 = __importDefault(require("chalk"));
+const cli_progress_1 = require("cli-progress");
+// Emoji constants for consistent usage
+exports.EMOJIS = {
+    SUCCESS: '✅',
+    ERROR: '❌',
+    WARNING: '⚠️',
+    INFO: 'ℹ️',
+    LOCK: '🔐',
+    PACKAGE: '📦',
+    FOLDER: '📁',
+    GEAR: '🔧',
+    SEARCH: '🔍',
+    ROCKET: '🚀',
+    DOWNLOAD: '📥',
+    PARTY: '🎉',
+    WRENCH: '🔧',
+    CHECK: '✅',
+    CROSS: '❌',
+    ARROW: '→',
+};
+// Color utilities
+exports.colors = {
+    success: chalk_1.default.green,
+    error: chalk_1.default.red,
+    warning: chalk_1.default.yellow,
+    info: chalk_1.default.blue,
+    accent: chalk_1.default.cyan,
+    muted: chalk_1.default.gray,
+};
+// Check if we're in a TTY environment
+exports.isTTY = process.stdout.isTTY;
+// Global flags for disabling features
+exports.noAnimation = false;
+exports.noEmoji = false;
+exports.ciMode = false;
+// Set global flags
+function setUIFlags(flags) {
+    exports.noAnimation = flags.noAnimation || exports.ciMode;
+    exports.noEmoji = flags.noEmoji || exports.ciMode;
+    exports.ciMode = flags.ci || false;
+}
+// Apply emoji settings to text
+function applyEmoji(text, emoji) {
+    if (exports.noEmoji || !emoji)
+        return text;
+    return `${emoji} ${text}`;
+}
+// Spinner wrapper with TTY detection
+class Spinner {
+    text;
+    emoji;
+    spinner = null;
+    startTime = 0;
+    constructor(text, emoji) {
+        this.text = text;
+        this.emoji = emoji;
+    }
+    start() {
+        if (!exports.isTTY || exports.noAnimation) {
+            console.log(applyEmoji(this.text, this.emoji));
+            this.startTime = Date.now();
+            return this;
+        }
+        this.spinner = (0, ora_1.default)({
+            text: applyEmoji(this.text, this.emoji),
+            spinner: 'dots',
+        }).start();
+        this.startTime = Date.now();
+        return this;
+    }
+    update(text, emoji) {
+        if (!this.spinner) {
+            if (exports.isTTY && !exports.noAnimation) {
+                this.spinner = (0, ora_1.default)(applyEmoji(text, emoji)).start();
+            }
+            else {
+                console.log(applyEmoji(text, emoji));
+            }
+            return this;
+        }
+        this.spinner.text = applyEmoji(text, emoji || this.emoji);
+        return this;
+    }
+    succeed(text) {
+        const duration = this.getDuration();
+        const successText = text || this.text;
+        const durationInfo = duration > 1000 ? ` (${duration}ms)` : '';
+        if (this.spinner) {
+            this.spinner.succeed(applyEmoji(successText, exports.EMOJIS.SUCCESS) + durationInfo);
+        }
+        else {
+            console.log(applyEmoji(successText + durationInfo, exports.EMOJIS.SUCCESS));
+        }
+        return this;
+    }
+    fail(text) {
+        const failText = text || this.text;
+        if (this.spinner) {
+            this.spinner.fail(applyEmoji(failText, exports.EMOJIS.ERROR));
+        }
+        else {
+            console.error(applyEmoji(failText, exports.EMOJIS.ERROR));
+        }
+        return this;
+    }
+    stop() {
+        if (this.spinner) {
+            this.spinner.stop();
+        }
+        return this;
+    }
+    getDuration() {
+        return Date.now() - this.startTime;
+    }
+}
+exports.Spinner = Spinner;
+// Utility function to wrap async operations with spinner
+async function withSpinner(text, operation, options = {}) {
+    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
+class ProgressBar {
+    options;
+    bar = null;
+    constructor(options) {
+        this.options = options;
+    }
+    start() {
+        if (!exports.isTTY || exports.noAnimation) {
+            if (this.options.title) {
+                console.log(this.options.title);
+            }
+            return this;
+        }
+        this.bar = new cli_progress_1.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) {
+        if (this.bar) {
+            this.bar.update(current);
+        }
+        else if (exports.isTTY && !exports.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 = 1) {
+        if (this.bar) {
+            this.bar.increment(amount);
+        }
+        return this;
+    }
+    stop() {
+        if (this.bar) {
+            this.bar.stop();
+        }
+        else if (exports.isTTY && !exports.noAnimation) {
+            process.stdout.write('\n');
+        }
+        return this;
+    }
+}
+exports.ProgressBar = ProgressBar;
+// Enhanced console methods
+exports.log = {
+    success: (text) => console.log(exports.colors.success(applyEmoji(text, exports.EMOJIS.SUCCESS))),
+    error: (text) => console.error(exports.colors.error(applyEmoji(text, exports.EMOJIS.ERROR))),
+    warning: (text) => console.warn(exports.colors.warning(applyEmoji(text, exports.EMOJIS.WARNING))),
+    info: (text) => console.log(exports.colors.info(applyEmoji(text, exports.EMOJIS.INFO))),
+    plain: (text) => console.log(text),
+    header: (text) => console.log(exports.colors.accent(`\n${text}\n`)),
+    step: (step, total, text) => {
+        const stepText = `${step}/${total}`;
+        console.log(exports.colors.muted(`[${stepText}]`) + ' ' + text);
+    },
+};
+// Utility to show a section header
+function showSection(title, emoji) {
+    console.log('\n' + exports.colors.accent('='.repeat(50)));
+    console.log(applyEmoji(title, emoji));
+    console.log(exports.colors.accent('='.repeat(50)) + '\n');
+}
+// Utility to show next steps
+function showNextSteps(steps) {
+    console.log(exports.colors.accent('\nNext steps:'));
+    steps.forEach((step, index) => {
+        console.log(`  ${index + 1}. ${step}`);
+    });
+}

package/package.json

@@ -1,33 +1,37 @@
-{
-  "name": "blok0",
-  "version": "0.1.2",
-  "description": "CLI tool for Payload CMS scaffolding",
-  "main": "dist/index.js",
-  "bin": {
-    "blok0": "./dist/index.js"
-  },
-  "scripts": {
-    "build": "bun run tsc",
-    "dev": "bun run tsx src/index.ts"
-  },
-  "keywords": [
-    "cli",
-    "payload",
-    "cms"
-  ],
-  "author": "Your Name",
-  "license": "MIT",
-  "dependencies": {
-    "axios": "^1.13.2",
-    "keytar": "^7.9.0",
-    "open": "^11.0.0",
-    "payload": "^2.0.0",
-    "ts-morph": "^27.0.2"
-  },
-  "devDependencies": {
-    "@types/node": "^20.19.27",
-    "bun-types": "^1.0.0",
-    "tsx": "^4.0.0",
-    "typescript": "^5.0.0"
-  }
-}
+{
+  "name": "blok0",
+  "version": "0.1.3",
+  "description": "CLI tool for Payload CMS scaffolding",
+  "main": "dist/index.js",
+  "bin": {
+    "blok0": "./dist/index.js"
+  },
+  "scripts": {
+    "build": "bun run tsc",
+    "dev": "bun run tsx src/index.ts"
+  },
+  "keywords": [
+    "cli",
+    "payload",
+    "cms"
+  ],
+  "author": "Your Name",
+  "license": "MIT",
+  "dependencies": {
+    "axios": "^1.13.2",
+    "chalk": "^5.6.2",
+    "cli-progress": "^3.12.0",
+    "keytar": "^7.9.0",
+    "open": "^11.0.0",
+    "ora": "^9.0.0",
+    "payload": "^2.0.0",
+    "ts-morph": "^27.0.2"
+  },
+  "devDependencies": {
+    "@types/cli-progress": "^3.11.6",
+    "@types/node": "^20.19.27",
+    "bun-types": "^1.0.0",
+    "tsx": "^4.0.0",
+    "typescript": "^5.0.0"
+  }
+}

package/src/handlers/add-block.ts

@@ -10,40 +10,47 @@ import {
   validateBlockDirectory
 } from '../blocks';
 import { updatePageCollectionConfig, updateRenderBlocksComponent, findPagesCollection, findRenderBlocksComponent } from '../ast';
+import { withSpinner, log, showSection, showNextSteps, EMOJIS, ProgressBar } from '../ui';
 
 /**
  * Handle add block command
  */
 export async function handleAddBlock(blockUrl: string, options: { force?: boolean; dryRun?: boolean } = {}): Promise<void> {
-  console.log('📦 Adding Blok0 Block');
-  console.log('====================');
-  console.log('');
+  showSection('📦 Adding Blok0 Block', EMOJIS.PACKAGE);
 
   try {
     // Step 1: Authentication check
-    console.log('🔐 Checking authentication...');
-    const authenticated = await isAuthenticated();
+    const authenticated = await withSpinner(
+      'Checking authentication',
+      () => isAuthenticated(),
+      { emoji: EMOJIS.LOCK }
+    );
+
     if (!authenticated) {
-      console.error('❌ You are not logged in. Please run `blok0 login` first.');
+      log.error('You are not logged in. Please run `blok0 login` first.');
       process.exit(1);
     }
 
     // Step 2: Fetch block data from API
-    console.log(`📡 Fetching block from: ${blockUrl}`);
-    const { metadata, files } = await apiClient.fetchBlockData(blockUrl);
-    console.log(`✅ Found block: "${metadata.name}" (${metadata.slug})`);
+    const { metadata, files } = await withSpinner(
+      `Fetching block from ${blockUrl}`,
+      () => apiClient.fetchBlockData(blockUrl),
+      { emoji: EMOJIS.SEARCH }
+    );
+
+    log.success(`Found block: "${metadata.name}" (${metadata.slug})`);
 
     // Step 3: Check if block is already registered
     if (isBlockRegistered(metadata.slug)) {
       if (!options.force) {
-        console.error(`❌ Block "${metadata.slug}" is already installed. Use --force to reinstall.`);
+        log.error(`Block "${metadata.slug}" is already installed. Use --force to reinstall.`);
         process.exit(1);
       }
-      console.log('⚠️  Block already exists, reinstalling...');
+      log.warning('Block already exists, reinstalling...');
     }
 
     if (options.dryRun) {
-      console.log('🔍 Dry run mode - would perform the following actions:');
+      log.info('Dry run mode - would perform the following actions:');
       console.log(`  - Create directory: src/blocks/${metadata.slug}`);
       console.log(`  - Download ${files.length} files`);
       console.log('  - Update Payload config');
@@ -56,14 +63,13 @@ export async function handleAddBlock(blockUrl: string, options: { force?: boolea
     const blocksDir = ensureBlocksDirectory();
 
     // Step 5: Create block directory and files
-    console.log('📁 Creating block directory and files...');
     const { dir, configPath, componentPath } = createBlockDirectory(blocksDir, metadata.slug, files);
-    console.log(`✅ Created block directory: ${path.relative(process.cwd(), dir)}`);
+    log.success(`Created block directory: ${path.relative(process.cwd(), dir)}`);
 
     // Step 6: Validate created block
     const validation = validateBlockDirectory(dir);
     if (!validation.valid) {
-      console.error('❌ Block validation failed:');
+      log.error('Block validation failed:');
       validation.errors.forEach(error => console.error(`  - ${error}`));
       // Cleanup on failure
       require('fs').rmSync(dir, { recursive: true, force: true });
@@ -90,43 +96,50 @@ export async function handleAddBlock(blockUrl: string, options: { force?: boolea
     // Step 9: Update Pages collection (AST manipulation)
     const pagesCollectionPath = findPagesCollection();
     if (pagesCollectionPath) {
-      console.log('🔧 Updating Pages collection...');
-      const blockIdentifier = slugToIdentifier(metadata.slug);
-      const relativeConfigPath = `@/blocks/${metadata.slug}/config`;
-
-      updatePageCollectionConfig(pagesCollectionPath, relativeConfigPath, blockIdentifier);
-      console.log(`✅ Added ${blockIdentifier} to Pages collection`);
+      await withSpinner(
+        'Updating Pages collection',
+        async () => {
+          const blockIdentifier = slugToIdentifier(metadata.slug);
+          const relativeConfigPath = `@/blocks/${metadata.slug}/config`;
+          updatePageCollectionConfig(pagesCollectionPath, relativeConfigPath, blockIdentifier);
+        },
+        { emoji: EMOJIS.GEAR, successText: `Added ${slugToIdentifier(metadata.slug)} to Pages collection` }
+      );
     } else {
-      console.warn('⚠️  Could not find Pages collection file. You may need to manually add the block to your collections.');
+      log.warning('Could not find Pages collection file. You may need to manually add the block to your collections.');
     }
 
     // Step 10: Update RenderBlocks component (AST manipulation)
     const renderBlocksPath = findRenderBlocksComponent();
     if (renderBlocksPath) {
-      console.log('🔧 Updating RenderBlocks component...');
-      const relativeComponentPath = `./${metadata.slug}/Component`;
-
-      updateRenderBlocksComponent(renderBlocksPath, metadata.slug, relativeComponentPath);
-      console.log(`✅ Added ${metadata.slug} component to RenderBlocks`);
+      await withSpinner(
+        'Updating RenderBlocks component',
+        async () => {
+          const relativeComponentPath = `./${metadata.slug}/Component`;
+          updateRenderBlocksComponent(renderBlocksPath, metadata.slug, relativeComponentPath);
+        },
+        { emoji: EMOJIS.GEAR, successText: `Added ${metadata.slug} component to RenderBlocks` }
+      );
     } else {
-      console.warn('⚠️  Could not find RenderBlocks component. You may need to manually add the block component.');
+      log.warning('Could not find RenderBlocks component. You may need to manually add the block component.');
     }
 
     // Step 11: Register block in registry
-    console.log('📝 Registering block...');
-    addBlockToRegistry(blockEntry);
-    console.log('✅ Block registered successfully');
-
-    console.log('');
-    console.log('🎉 Block installation complete!');
-    console.log('');
-    console.log('Next steps:');
-    console.log('1. Review the installed files in src/blocks/' + metadata.slug);
-    console.log('2. Test your application to ensure the block works correctly');
-    console.log('3. Commit the changes to your repository');
+    await withSpinner(
+      'Registering block',
+      async () => addBlockToRegistry(blockEntry),
+      { emoji: EMOJIS.CHECK, successText: 'Block registered successfully' }
+    );
+
+    log.success('Block installation complete!');
+    showNextSteps([
+      `Review the installed files in src/blocks/${metadata.slug}`,
+      'Test your application to ensure the block works correctly',
+      'Commit the changes to your repository'
+    ]);
 
   } catch (error) {
     console.error('❌ Failed to add block:', (error as Error).message);
     process.exit(1);
   }
-}
+}

package/src/handlers/generate.ts

@@ -1,6 +1,7 @@
 import { createInterface } from 'readline';
 import { exec, spawn } from 'child_process';
 import { promisify } from 'util';
+import { withSpinner, log, showNextSteps, EMOJIS } from '../ui';
 
 const execAsync = promisify(exec);
 
@@ -20,43 +21,39 @@ function prompt(question: string): Promise<boolean> {
 }
 
 export async function generateStarter(): Promise<void> {
-  console.log('Cloning starter repository...');
-  try {
-    await execAsync(`git clone --depth 1 ${repoUrl} .`);
-    console.log('Repository cloned successfully.');
-  } catch (error) {
-    throw new Error(`Failed to clone repository: ${error}`);
-  }
+  log.header('🚀 Setting up Blok0 starter project...');
 
-  // Prompt for bun install
-  const installDeps = await prompt('Run \'bun install\' to install dependencies? (y/n): ');
-  if (installDeps) {
-    console.log('Installing dependencies...');
-    try {
-      await new Promise<void>((resolve, reject) => {
-        const child = spawn('bun', ['install'], { stdio: 'inherit' });
-        child.on('close', (code) => {
-          if (code === 0) resolve();
-          else reject(new Error('Failed to install dependencies'));
-        });
-        child.on('error', reject);
-      });
-    } catch (error) {
-      console.error('Failed to install dependencies:', error);
+  // Clone repository with spinner
+  await withSpinner(
+    'Cloning starter repository',
+    async () => {
+      await execAsync(`git clone --depth 1 ${repoUrl} .`);
+    },
+    {
+      emoji: EMOJIS.DOWNLOAD,
+      successText: 'Repository cloned successfully'
     }
-  }
+  );
 
   // Prompt for git init
   const initGit = await prompt('Initialize git repository? (y/n): ');
   if (initGit) {
-    console.log('Initializing git repository...');
-    try {
-      await execAsync('git init');
-      console.log('Git repository initialized.');
-    } catch (error) {
-      console.error('Failed to initialize git:', error);
-    }
+    await withSpinner(
+      'Initializing git repository',
+      async () => {
+        await execAsync('git init');
+      },
+      {
+        emoji: EMOJIS.GEAR,
+        successText: 'Git repository initialized'
+      }
+    );
   }
 
-  console.log('Blok0 starter project created successfully!');
+  log.success('Starter project ready!');
+  showNextSteps([
+    'Run \'npm install\' or \'bun install\' to install dependencies',
+    'Start developing your Blok0 x PayloadCMS project'
+  ]);
 }
+

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);
   }
 }