blok0 0.1.1 → 0.1.3

package/dist/handlers/add-block.js

@@ -40,35 +40,32 @@ const api_1 = require("../api");
 const registry_1 = require("../registry");
 const blocks_1 = require("../blocks");
 const ast_1 = require("../ast");
+const ui_1 = require("../ui");
 /**
  * Handle add block command
  */
 async function handleAddBlock(blockUrl, options = {}) {
-    console.log('📦 Adding Blok0 Block');
-    console.log('====================');
-    console.log('');
+    (0, ui_1.showSection)('📦 Adding Blok0 Block', ui_1.EMOJIS.PACKAGE);
     try {
         // Step 1: Authentication check
-        console.log('🔐 Checking authentication...');
-        const authenticated = await (0, auth_1.isAuthenticated)();
+        const authenticated = await (0, ui_1.withSpinner)('Checking authentication', () => (0, auth_1.isAuthenticated)(), { emoji: ui_1.EMOJIS.LOCK });
         if (!authenticated) {
-            console.error('❌ You are not logged in. Please run `blok0 login` first.');
+            ui_1.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 api_1.apiClient.fetchBlockData(blockUrl);
-        console.log(`✅ Found block: "${metadata.name}" (${metadata.slug})`);
+        const { metadata, files } = await (0, ui_1.withSpinner)(`Fetching block from ${blockUrl}`, () => api_1.apiClient.fetchBlockData(blockUrl), { emoji: ui_1.EMOJIS.SEARCH });
+        ui_1.log.success(`Found block: "${metadata.name}" (${metadata.slug})`);
         // Step 3: Check if block is already registered
         if ((0, registry_1.isBlockRegistered)(metadata.slug)) {
             if (!options.force) {
-                console.error(`❌ Block "${metadata.slug}" is already installed. Use --force to reinstall.`);
+                ui_1.log.error(`Block "${metadata.slug}" is already installed. Use --force to reinstall.`);
                 process.exit(1);
             }
-            console.log('⚠️  Block already exists, reinstalling...');
+            ui_1.log.warning('Block already exists, reinstalling...');
         }
         if (options.dryRun) {
-            console.log('🔍 Dry run mode - would perform the following actions:');
+            ui_1.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');
@@ -79,13 +76,12 @@ async function handleAddBlock(blockUrl, options = {}) {
         // Step 4: Ensure blocks directory exists
         const blocksDir = (0, blocks_1.ensureBlocksDirectory)();
         // Step 5: Create block directory and files
-        console.log('📁 Creating block directory and files...');
         const { dir, configPath, componentPath } = (0, blocks_1.createBlockDirectory)(blocksDir, metadata.slug, files);
-        console.log(`✅ Created block directory: ${path.relative(process.cwd(), dir)}`);
+        ui_1.log.success(`Created block directory: ${path.relative(process.cwd(), dir)}`);
         // Step 6: Validate created block
         const validation = (0, blocks_1.validateBlockDirectory)(dir);
         if (!validation.valid) {
-            console.error('❌ Block validation failed:');
+            ui_1.log.error('Block validation failed:');
             validation.errors.forEach(error => console.error(`  - ${error}`));
             // Cleanup on failure
             require('fs').rmSync(dir, { recursive: true, force: true });
@@ -103,37 +99,34 @@ async function handleAddBlock(blockUrl, options = {}) {
         // Step 9: Update Pages collection (AST manipulation)
         const pagesCollectionPath = (0, ast_1.findPagesCollection)();
         if (pagesCollectionPath) {
-            console.log('🔧 Updating Pages collection...');
-            const blockIdentifier = (0, blocks_1.slugToIdentifier)(metadata.slug);
-            const relativeConfigPath = `@/blocks/${metadata.slug}/config`;
-            (0, ast_1.updatePageCollectionConfig)(pagesCollectionPath, relativeConfigPath, blockIdentifier);
-            console.log(`✅ Added ${blockIdentifier} to Pages collection`);
+            await (0, ui_1.withSpinner)('Updating Pages collection', async () => {
+                const blockIdentifier = (0, blocks_1.slugToIdentifier)(metadata.slug);
+                const relativeConfigPath = `@/blocks/${metadata.slug}/config`;
+                (0, ast_1.updatePageCollectionConfig)(pagesCollectionPath, relativeConfigPath, blockIdentifier);
+            }, { emoji: ui_1.EMOJIS.GEAR, successText: `Added ${(0, blocks_1.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.');
+            ui_1.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 = (0, ast_1.findRenderBlocksComponent)();
         if (renderBlocksPath) {
-            console.log('🔧 Updating RenderBlocks component...');
-            const relativeComponentPath = `./${metadata.slug}/Component`;
-            (0, ast_1.updateRenderBlocksComponent)(renderBlocksPath, metadata.slug, relativeComponentPath);
-            console.log(`✅ Added ${metadata.slug} component to RenderBlocks`);
+            await (0, ui_1.withSpinner)('Updating RenderBlocks component', async () => {
+                const relativeComponentPath = `./${metadata.slug}/Component`;
+                (0, ast_1.updateRenderBlocksComponent)(renderBlocksPath, metadata.slug, relativeComponentPath);
+            }, { emoji: ui_1.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.');
+            ui_1.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...');
-        (0, registry_1.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 (0, ui_1.withSpinner)('Registering block', async () => (0, registry_1.addBlockToRegistry)(blockEntry), { emoji: ui_1.EMOJIS.CHECK, successText: 'Block registered successfully' });
+        ui_1.log.success('Block installation complete!');
+        (0, ui_1.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.message);

package/dist/handlers/generate.js

@@ -4,6 +4,7 @@ exports.generateStarter = generateStarter;
 const readline_1 = require("readline");
 const child_process_1 = require("child_process");
 const util_1 = require("util");
+const ui_1 = require("../ui");
 const execAsync = (0, util_1.promisify)(child_process_1.exec);
 const repoUrl = 'https://github.com/blok0-payload/starter.git';
 function prompt(question) {
@@ -19,45 +20,27 @@ function prompt(question) {
     });
 }
 async function generateStarter() {
-    console.log('Cloning starter repository...');
-    try {
+    ui_1.log.header('🚀 Setting up Blok0 starter project...');
+    // Clone repository with spinner
+    await (0, ui_1.withSpinner)('Cloning starter repository', async () => {
         await execAsync(`git clone --depth 1 ${repoUrl} .`);
-        console.log('Repository cloned successfully.');
-    }
-    catch (error) {
-        throw new Error(`Failed to clone repository: ${error}`);
-    }
-    // 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((resolve, reject) => {
-                const child = (0, child_process_1.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);
-        }
-    }
+    }, {
+        emoji: ui_1.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 (0, ui_1.withSpinner)('Initializing git repository', async () => {
             await execAsync('git init');
-            console.log('Git repository initialized.');
-        }
-        catch (error) {
-            console.error('Failed to initialize git:', error);
-        }
+        }, {
+            emoji: ui_1.EMOJIS.GEAR,
+            successText: 'Git repository initialized'
+        });
     }
-    console.log('Blok0 starter project created successfully!');
+    ui_1.log.success('Starter project ready!');
+    (0, ui_1.showNextSteps)([
+        'Run \'npm install\' or \'bun install\' to install dependencies',
+        'Start developing your Blok0 x PayloadCMS project'
+    ]);
 }

package/dist/handlers/login.js

@@ -8,6 +8,7 @@ exports.handleLogout = handleLogout;
 const auth_1 = require("../auth");
 const server_1 = require("../auth/server");
 const open_1 = __importDefault(require("open"));
+const ui_1 = require("../ui");
 // Add SIGINT handler for graceful cleanup
 process.on('SIGINT', () => {
     console.log('\n\n⚠️  Authentication cancelled by user.');
@@ -20,14 +21,12 @@ async function handleLogin(token, manual) {
     // Direct token authentication (CI/CD)
     if (token) {
         try {
-            console.log('🔐 Saving authentication token...');
-            await (0, auth_1.storeAccessToken)(token);
-            console.log('✅ Successfully authenticated!');
+            await (0, ui_1.withSpinner)('Saving authentication token', () => (0, auth_1.storeAccessToken)(token), { emoji: ui_1.EMOJIS.LOCK, successText: 'Successfully authenticated!' });
             console.log('');
-            console.log('You can now use blok0 commands that require authentication.');
+            ui_1.log.info('You can now use blok0 commands that require authentication.');
         }
         catch (error) {
-            console.error('❌ Failed to save authentication token:', error.message);
+            ui_1.log.error('Failed to save authentication token: ' + error.message);
             process.exit(1);
         }
         return;
@@ -53,29 +52,24 @@ async function handleLogin(token, manual) {
  * Handle browser-based authentication flow
  */
 async function handleBrowserLogin() {
-    console.log('🔐 Blok0 Authentication');
-    console.log('======================');
-    console.log('');
+    (0, ui_1.showSection)('🔐 Blok0 Authentication', ui_1.EMOJIS.LOCK);
     // Create authentication server
     const authServer = new server_1.AuthServer();
     try {
         // Initialize server (find available port)
-        console.log('🚀 Starting authentication server...');
-        await authServer.initialize();
+        await (0, ui_1.withSpinner)('Starting authentication server', () => authServer.initialize(), { emoji: ui_1.EMOJIS.ROCKET });
         // Get the authorization URL (now port is available)
         const authUrl = authServer.getAuthorizationUrl();
-        console.log('🌐 Opening browser for authentication...');
+        ui_1.log.info('Opening browser for authentication...');
         await (0, open_1.default)(authUrl);
-        console.log('📱 Please complete authentication in your browser.');
-        console.log('⏳ Waiting for authentication to complete...');
+        ui_1.log.info('Please complete authentication in your browser.');
+        ui_1.log.plain('⏳ Waiting for authentication to complete...');
         // Start server and wait for callback
         const authCallback = await authServer.start();
         // Store the token
-        console.log('🔐 Saving authentication token...');
-        await (0, auth_1.storeAccessToken)(authCallback.token);
-        console.log('✅ Successfully authenticated!');
+        await (0, ui_1.withSpinner)('Saving authentication token', () => (0, auth_1.storeAccessToken)(authCallback.token), { emoji: ui_1.EMOJIS.LOCK, successText: 'Successfully authenticated!' });
         console.log('');
-        console.log('You can now use blok0 commands that require authentication.');
+        ui_1.log.info('You can now use blok0 commands that require authentication.');
     }
     catch (error) {
         authServer.stop();
@@ -86,39 +80,36 @@ async function handleBrowserLogin() {
  * Show manual authentication instructions
  */
 function showManualInstructions() {
-    console.log('🔐 Blok0 Manual Authentication');
-    console.log('==============================');
-    console.log('');
+    (0, ui_1.showSection)('🔐 Blok0 Manual Authentication', ui_1.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:');
+    ui_1.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:');
+    ui_1.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.');
+    ui_1.log.info('For CI/CD environments, set the BLOK0_TOKEN environment variable.');
     console.log('');
-    console.log('💡 For browser-based login, run: blok0 login');
+    ui_1.log.info('For browser-based login, run: blok0 login');
 }
 /**
  * Handle logout command
  */
 async function handleLogout() {
     try {
-        const wasAuthenticated = await (0, auth_1.isAuthenticated)();
+        const wasAuthenticated = await (0, ui_1.withSpinner)('Checking authentication status', () => (0, auth_1.isAuthenticated)());
         if (!wasAuthenticated) {
-            console.log('You are not currently logged in.');
+            ui_1.log.warning('You are not currently logged in.');
             return;
         }
-        await (0, auth_1.clearCredentials)();
-        console.log('✅ Successfully logged out and cleared stored credentials.');
+        await (0, ui_1.withSpinner)('Clearing stored credentials', () => (0, auth_1.clearCredentials)(), { emoji: ui_1.EMOJIS.LOCK, successText: 'Successfully logged out and cleared stored credentials.' });
     }
     catch (error) {
-        console.error('❌ Failed to logout:', error.message);
+        ui_1.log.error('Failed to logout: ' + error.message);
         process.exit(1);
     }
 }

package/dist/index.js

@@ -41,6 +41,7 @@ const generate_1 = require("./handlers/generate");
 const login_1 = require("./handlers/login");
 const add_block_1 = require("./handlers/add-block");
 const registry_1 = require("./registry");
+const ui_1 = require("./ui");
 function prompt(question) {
     return new Promise((resolve) => {
         const rl = (0, readline_1.createInterface)({
@@ -75,27 +76,37 @@ 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
 `);
 }
 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');
+    (0, ui_1.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) {
             case 'generate':
@@ -132,9 +143,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 = {
@@ -144,7 +155,7 @@ async function main() {
                     await (0, add_block_1.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;
@@ -187,37 +198,33 @@ async function handleGenerateStarter(args) {
     }
 }
 async function handleDebug() {
-    console.log('🔍 Blok0 CLI Debug Information');
-    console.log('==============================');
-    console.log('');
+    const { showSection, log, withSpinner, EMOJIS } = await Promise.resolve().then(() => __importStar(require('./ui')));
+    showSection('🔍 Blok0 CLI Debug Information', EMOJIS.SEARCH);
     // Check stored token
     const { getAccessToken, isAuthenticated } = await Promise.resolve().then(() => __importStar(require('./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'}`);
     if (token) {
         console.log(`  Token Preview: ${token.substring(0, 20)}...`);
         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 Promise.resolve().then(() => __importStar(require('./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.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/dist/ui.d.ts

@@ -0,0 +1,77 @@
+export declare const EMOJIS: {
+    readonly SUCCESS: "✅";
+    readonly ERROR: "❌";
+    readonly WARNING: "⚠️";
+    readonly INFO: "ℹ️";
+    readonly LOCK: "🔐";
+    readonly PACKAGE: "📦";
+    readonly FOLDER: "📁";
+    readonly GEAR: "🔧";
+    readonly SEARCH: "🔍";
+    readonly ROCKET: "🚀";
+    readonly DOWNLOAD: "📥";
+    readonly PARTY: "🎉";
+    readonly WRENCH: "🔧";
+    readonly CHECK: "✅";
+    readonly CROSS: "❌";
+    readonly ARROW: "→";
+};
+export declare const colors: {
+    success: import("chalk").ChalkInstance;
+    error: import("chalk").ChalkInstance;
+    warning: import("chalk").ChalkInstance;
+    info: import("chalk").ChalkInstance;
+    accent: import("chalk").ChalkInstance;
+    muted: import("chalk").ChalkInstance;
+};
+export declare const isTTY: boolean;
+export declare let noAnimation: boolean;
+export declare let noEmoji: boolean;
+export declare let ciMode: boolean;
+export declare function setUIFlags(flags: {
+    noAnimation?: boolean;
+    noEmoji?: boolean;
+    ci?: boolean;
+}): void;
+export declare class Spinner {
+    private text;
+    private emoji?;
+    private spinner;
+    private startTime;
+    constructor(text: string, emoji?: string | undefined);
+    start(): this;
+    update(text: string, emoji?: string): this;
+    succeed(text?: string): this;
+    fail(text?: string): this;
+    stop(): this;
+    private getDuration;
+}
+export declare function withSpinner<T>(text: string, operation: () => Promise<T>, options?: {
+    emoji?: string;
+    successText?: string;
+    failText?: string;
+}): Promise<T>;
+export declare class ProgressBar {
+    private options;
+    private bar;
+    constructor(options: {
+        title?: string;
+        total: number;
+        format?: string;
+    });
+    start(): this;
+    update(current: number): this;
+    increment(amount?: number): this;
+    stop(): this;
+}
+export declare const log: {
+    success: (text: string) => void;
+    error: (text: string) => void;
+    warning: (text: string) => void;
+    info: (text: string) => void;
+    plain: (text: string) => void;
+    header: (text: string) => void;
+    step: (step: number, total: number, text: string) => void;
+};
+export declare function showSection(title: string, emoji?: string): void;
+export declare function showNextSteps(steps: string[]): void;