blok0 0.1.0 → 0.1.2

package/src/auth/index.ts

@@ -0,0 +1,154 @@
+import * as keytar from 'keytar';
+import * as os from 'os';
+import * as path from 'path';
+import * as fs from 'fs';
+
+const SERVICE_NAME = 'blok0';
+const CONFIG_DIR = path.join(os.homedir(), '.blok0');
+const CONFIG_FILE = path.join(CONFIG_DIR, 'config.json');
+
+export interface AuthConfig {
+  apiEndpoint?: string;
+  refreshToken?: string;
+  tokenExpiry?: number;
+}
+
+export interface AuthCallback {
+  token: string;
+  expires_in?: number;
+  refresh_token?: string;
+}
+
+export interface AuthServerOptions {
+  port?: number;
+  timeout?: number;
+  state?: string;
+}
+
+export interface TokenResponse {
+  access_token: string;
+  refresh_token?: string;
+  expires_in?: number;
+  token_type?: string;
+}
+
+/**
+ * Ensure config directory exists
+ */
+function ensureConfigDir(): void {
+  if (!fs.existsSync(CONFIG_DIR)) {
+    fs.mkdirSync(CONFIG_DIR, { recursive: true });
+  }
+}
+
+/**
+ * Load auth configuration from file
+ */
+export function loadAuthConfig(): AuthConfig {
+  try {
+    if (fs.existsSync(CONFIG_FILE)) {
+      const data = fs.readFileSync(CONFIG_FILE, 'utf-8');
+      return JSON.parse(data);
+    }
+  } catch (error) {
+    console.warn('Failed to load auth config:', error);
+  }
+  return {};
+}
+
+/**
+ * Save auth configuration to file
+ */
+export function saveAuthConfig(config: AuthConfig): void {
+  ensureConfigDir();
+  fs.writeFileSync(CONFIG_FILE, JSON.stringify(config, null, 2));
+}
+
+/**
+ * Store access token securely
+ */
+export async function storeAccessToken(token: string): Promise<void> {
+  try {
+    await keytar.setPassword(SERVICE_NAME, 'access_token', token);
+  } catch (error) {
+    console.error('Failed to store access token:', error);
+    throw new Error('Unable to securely store access token');
+  }
+}
+
+/**
+ * Get stored access token
+ */
+export async function getAccessToken(): Promise<string | null> {
+  try {
+    return await keytar.getPassword(SERVICE_NAME, 'access_token');
+  } catch (error) {
+    console.error('Failed to retrieve access token:', error);
+    return null;
+  }
+}
+
+/**
+ * Store refresh token securely
+ */
+export async function storeRefreshToken(token: string): Promise<void> {
+  try {
+    await keytar.setPassword(SERVICE_NAME, 'refresh_token', token);
+  } catch (error) {
+    console.error('Failed to store refresh token:', error);
+    throw new Error('Unable to securely store refresh token');
+  }
+}
+
+/**
+ * Get stored refresh token
+ */
+export async function getRefreshToken(): Promise<string | null> {
+  try {
+    return await keytar.getPassword(SERVICE_NAME, 'refresh_token');
+  } catch (error) {
+    console.error('Failed to retrieve refresh token:', error);
+    return null;
+  }
+}
+
+/**
+ * Clear all stored credentials
+ */
+export async function clearCredentials(): Promise<void> {
+  try {
+    await keytar.deletePassword(SERVICE_NAME, 'access_token');
+    await keytar.deletePassword(SERVICE_NAME, 'refresh_token');
+
+    if (fs.existsSync(CONFIG_FILE)) {
+      fs.unlinkSync(CONFIG_FILE);
+    }
+  } catch (error) {
+    console.error('Failed to clear credentials:', error);
+    throw new Error('Unable to clear stored credentials');
+  }
+}
+
+/**
+ * Check if user is authenticated
+ */
+export async function isAuthenticated(): Promise<boolean> {
+  const token = await getAccessToken();
+  return token !== null;
+}
+
+/**
+ * Validate token expiry (basic check)
+ */
+export function isTokenExpired(expiry?: number): boolean {
+  if (!expiry) return false;
+  return Date.now() >= expiry;
+}
+
+/**
+ * Get authorization header for API requests
+ */
+export async function getAuthHeader(): Promise<string | null> {
+  const token = await getAccessToken();
+  return token ? `Bearer ${token}` : null;
+}

package/src/auth/server.ts

@@ -0,0 +1,240 @@
+import * as http from 'http';
+import { EventEmitter } from 'events';
+import { randomBytes } from 'crypto';
+import { AuthCallback, AuthServerOptions } from './index';
+import {
+  AUTH_BASE_URL,
+  AUTHORIZE_ENDPOINT,
+  DEFAULT_TIMEOUT,
+  PORT_RANGE,
+  CALLBACK_PATH,
+  SUCCESS_HTML,
+  ERROR_HTML,
+  TIMEOUT_HTML
+} from './constants';
+
+export class AuthServer extends EventEmitter {
+  private server?: http.Server;
+  private port?: number;
+  private state: string;
+  private timeoutId?: NodeJS.Timeout;
+  private resolveCallback?: (value: AuthCallback) => void;
+  private rejectCallback?: (error: Error) => void;
+
+  constructor(options: AuthServerOptions = {}) {
+    super();
+    this.state = options.state || this.generateState();
+  }
+
+  /**
+   * Generate a random state parameter for CSRF protection
+   */
+  private generateState(): string {
+    return randomBytes(32).toString('hex');
+  }
+
+  /**
+   * Find an available port in the configured range
+   */
+  private async findAvailablePort(): Promise<number> {
+    const { min, max } = PORT_RANGE;
+
+    for (let port = min; port <= max; port++) {
+      if (await this.isPortAvailable(port)) {
+        return port;
+      }
+    }
+
+    throw new Error('No available ports found in range');
+  }
+
+  /**
+   * Check if a port is available
+   */
+  private async isPortAvailable(port: number): Promise<boolean> {
+    return new Promise((resolve) => {
+      const testServer = http.createServer();
+      testServer.listen(port, '127.0.0.1', () => {
+        testServer.close(() => resolve(true));
+      });
+      testServer.on('error', () => resolve(false));
+    });
+  }
+
+  /**
+   * Handle incoming HTTP requests
+   */
+  private handleRequest = (req: http.IncomingMessage, res: http.ServerResponse): void => {
+    try {
+      const fullUrl = `http://localhost:${this.port}${req.url}`;
+      const parsedUrl = new URL(fullUrl);
+      const pathname = parsedUrl.pathname;
+
+      // Handle callback endpoint
+      if (pathname === CALLBACK_PATH && req.method === 'GET') {
+        this.handleCallback(parsedUrl, res);
+        return;
+      }
+
+      // Handle any other request with a 404
+      res.writeHead(404, { 'Content-Type': 'text/plain' });
+      res.end('Not found');
+    } catch (error) {
+      console.error('Error parsing request URL:', error);
+      res.writeHead(400, { 'Content-Type': 'text/plain' });
+      res.end('Bad request');
+    }
+  };
+
+  /**
+   * Handle the OAuth callback
+   */
+  private handleCallback(parsedUrl: URL, res: http.ServerResponse): void {
+    const searchParams = parsedUrl.searchParams;
+    const state = searchParams.get('state');
+    const token = searchParams.get('token');
+    const error = searchParams.get('error');
+
+    // Validate state parameter
+    if (!state || state !== this.state) {
+      console.error('State parameter mismatch - possible CSRF attack');
+      console.error(`Expected: ${this.state}, Received: ${state}`);
+      res.writeHead(400, { 'Content-Type': 'text/html' });
+      res.end(ERROR_HTML);
+      this.emit('error', new Error('Invalid state parameter'));
+      return;
+    }
+
+    // Handle error from authorization server
+    if (error) {
+      console.error('Authorization error:', error);
+      res.writeHead(400, { 'Content-Type': 'text/html' });
+      res.end(ERROR_HTML);
+      this.emit('error', new Error(`Authorization failed: ${error}`));
+      return;
+    }
+
+    // Handle successful authorization
+    if (token) {
+      const authCallback: AuthCallback = { token };
+      res.writeHead(200, { 'Content-Type': 'text/html' });
+      res.end(SUCCESS_HTML);
+      this.emit('success', authCallback);
+      return;
+    }
+
+    // Handle missing token
+    console.error('No token received in callback');
+    res.writeHead(400, { 'Content-Type': 'text/html' });
+    res.end(ERROR_HTML);
+    this.emit('error', new Error('No token received'));
+  }
+
+  /**
+   * Initialize the server by finding an available port
+   */
+  async initialize(): Promise<void> {
+    if (!this.port) {
+      this.port = await this.findAvailablePort();
+    }
+  }
+
+  /**
+   * Start the authentication server
+   */
+  async start(): Promise<AuthCallback> {
+    return new Promise(async (resolve, reject) => {
+      this.resolveCallback = resolve;
+      this.rejectCallback = reject;
+
+      try {
+        // Initialize (find port) if not already done
+        await this.initialize();
+
+        // Create server
+        this.server = http.createServer(this.handleRequest);
+
+        // Set up event listeners
+        this.on('success', (callback: AuthCallback) => {
+          this.cleanup();
+          this.resolveCallback!(callback);
+        });
+
+        this.on('error', (error: Error) => {
+          this.cleanup();
+          this.rejectCallback!(error);
+        });
+
+        // Set timeout
+        this.timeoutId = setTimeout(() => {
+          this.handleTimeout();
+        }, DEFAULT_TIMEOUT);
+
+        // Start server
+        await new Promise<void>((resolveServer, rejectServer) => {
+          this.server!.listen(this.port, '127.0.0.1', () => {
+            console.log(`🔐 Authentication server started on http://localhost:${this.port}`);
+            resolveServer();
+          });
+          this.server!.on('error', rejectServer);
+        });
+
+      } catch (error) {
+        this.cleanup();
+        reject(error);
+      }
+    });
+  }
+
+  /**
+   * Handle authentication timeout
+   */
+  private handleTimeout(): void {
+    console.log('⏱️  Authentication timed out');
+
+    // Send timeout page to any open browser windows
+    if (this.server) {
+      // Note: In a real implementation, we'd track active connections
+      // For now, we'll just emit the error
+    }
+
+    this.emit('error', new Error('Authentication timed out'));
+  }
+
+  /**
+   * Get the authorization URL to open in browser
+   */
+  getAuthorizationUrl(): string {
+    const redirectUri = `http://localhost:${this.port}${CALLBACK_PATH}`;
+    const params = new URLSearchParams({
+      redirect_uri: redirectUri,
+      state: this.state,
+    });
+
+    return `${AUTH_BASE_URL}${AUTHORIZE_ENDPOINT}?${params.toString()}`;
+  }
+
+  /**
+   * Clean up server resources
+   */
+  private cleanup(): void {
+    if (this.timeoutId) {
+      clearTimeout(this.timeoutId);
+      this.timeoutId = undefined;
+    }
+
+    if (this.server) {
+      this.server.close();
+      this.server = undefined;
+    }
+
+    this.removeAllListeners();
+  }
+
+  /**
+   * Stop the server
+   */
+  stop(): void {
+    this.cleanup();
+  }
+}

package/src/blocks/index.ts

@@ -0,0 +1,186 @@
+import * as fs from 'fs';
+import * as path from 'path';
+import { BlockEntry } from '../registry';
+import { CodeFile } from '../api';
+
+/**
+ * Convert slug to PascalCase identifier
+ */
+export function slugToIdentifier(slug: string): string {
+  return slug
+    .split('-')
+    .map(word => word.charAt(0).toUpperCase() + word.slice(1))
+    .join('');
+}
+
+/**
+ * Convert slug to folder name (direct mapping)
+ */
+export function slugToFolderName(slug: string): string {
+  return slug;
+}
+
+/**
+ * Validate that a directory contains a valid block
+ */
+export function validateBlockDirectory(dirPath: string): { valid: boolean; errors: string[] } {
+  const errors: string[] = [];
+
+  if (!fs.existsSync(dirPath)) {
+    errors.push('Block directory does not exist');
+    return { valid: false, errors };
+  }
+
+  const configPath = path.join(dirPath, 'config.ts');
+  if (!fs.existsSync(configPath)) {
+    errors.push('config.ts file is missing');
+  }
+
+  // Check if config.ts exports a valid block configuration
+  if (fs.existsSync(configPath)) {
+    try {
+      const configContent = fs.readFileSync(configPath, 'utf-8');
+
+      // Basic validation - check for required exports
+      if (!configContent.includes('export') || !configContent.includes('Block')) {
+        errors.push('config.ts does not appear to export a valid block configuration');
+      }
+    } catch (error) {
+      errors.push(`Failed to read config.ts: ${(error as Error).message}`);
+    }
+  }
+
+  return { valid: errors.length === 0, errors };
+}
+
+/**
+ * Create block directory structure and write files
+ */
+export function createBlockDirectory(
+  baseDir: string,
+  slug: string,
+  files: CodeFile[]
+): { dir: string; configPath: string; componentPath: string } {
+  const blockDir = path.join(baseDir, slugToFolderName(slug));
+
+  // Check if directory already exists
+  if (fs.existsSync(blockDir)) {
+    throw new Error(`Block directory already exists: ${blockDir}`);
+  }
+
+  // Create directory
+  fs.mkdirSync(blockDir, { recursive: true });
+
+  let configPath = '';
+  let componentPath = '';
+
+  // Write files
+  for (const file of files) {
+    const filePath = path.join(blockDir, file.name);
+    fs.writeFileSync(filePath, file.content);
+
+    if (file.name === 'config.ts') {
+      configPath = filePath;
+    } else if (file.name === 'Component.tsx') {
+      componentPath = filePath;
+    }
+  }
+
+  if (!configPath) {
+    throw new Error('config.ts file was not found in downloaded files');
+  }
+
+  if (!componentPath) {
+    throw new Error('Component.tsx file was not found in downloaded files');
+  }
+
+  return { dir: blockDir, configPath, componentPath };
+}
+
+/**
+ * Remove block directory
+ */
+export function removeBlockDirectory(dirPath: string): void {
+  if (fs.existsSync(dirPath)) {
+    fs.rmSync(dirPath, { recursive: true, force: true });
+  }
+}
+
+/**
+ * Create block entry from metadata and file paths
+ */
+export function createBlockEntry(
+  metadata: { id: number; name: string; slug: string; sourceUrl: string },
+  dir: string,
+  configPath: string,
+  componentPath: string,
+  checksums: { [filename: string]: string }
+): BlockEntry {
+  return {
+    id: metadata.id,
+    name: metadata.name,
+    slug: metadata.slug,
+    dir,
+    configPath,
+    componentPath,
+    source: {
+      url: metadata.sourceUrl,
+      id: metadata.id,
+      fetchedAt: new Date().toISOString()
+    },
+    checksums
+  };
+}
+
+/**
+ * Get all block directories in src/blocks
+ */
+export function getBlockDirectories(blocksDir: string = 'src/blocks'): string[] {
+  const fullBlocksDir = path.join(process.cwd(), blocksDir);
+
+  if (!fs.existsSync(fullBlocksDir)) {
+    return [];
+  }
+
+  const entries = fs.readdirSync(fullBlocksDir, { withFileTypes: true });
+  return entries
+    .filter(entry => entry.isDirectory())
+    .map(entry => path.join(fullBlocksDir, entry.name));
+}
+
+/**
+ * Find blocks by scanning filesystem (fallback when registry is unavailable)
+ */
+export function discoverBlocksFromFilesystem(): Array<{ slug: string; dir: string; hasConfig: boolean }> {
+  const blocksDir = path.join(process.cwd(), 'src/blocks');
+
+  if (!fs.existsSync(blocksDir)) {
+    return [];
+  }
+
+  const blockDirs = getBlockDirectories();
+  const blocks: Array<{ slug: string; dir: string; hasConfig: boolean }> = [];
+
+  for (const dir of blockDirs) {
+    const slug = path.basename(dir);
+    const configPath = path.join(dir, 'config.ts');
+    const hasConfig = fs.existsSync(configPath);
+
+    blocks.push({ slug, dir, hasConfig });
+  }
+
+  return blocks;
+}
+
+/**
+ * Ensure src/blocks directory exists
+ */
+export function ensureBlocksDirectory(): string {
+  const blocksDir = path.join(process.cwd(), 'src/blocks');
+
+  if (!fs.existsSync(blocksDir)) {
+    fs.mkdirSync(blocksDir, { recursive: true });
+  }
+
+  return blocksDir;
+}

package/src/handlers/add-block.ts

@@ -0,0 +1,132 @@
+import * as path from 'path';
+import { isAuthenticated } from '../auth';
+import { apiClient } from '../api';
+import { isBlockRegistered, addBlockToRegistry, calculateDirectoryChecksums } from '../registry';
+import {
+  ensureBlocksDirectory,
+  createBlockDirectory,
+  createBlockEntry,
+  slugToIdentifier,
+  validateBlockDirectory
+} from '../blocks';
+import { updatePageCollectionConfig, updateRenderBlocksComponent, findPagesCollection, findRenderBlocksComponent } from '../ast';
+
+/**
+ * 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('');
+
+  try {
+    // Step 1: Authentication check
+    console.log('🔐 Checking authentication...');
+    const authenticated = await isAuthenticated();
+    if (!authenticated) {
+      console.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})`);
+
+    // 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.`);
+        process.exit(1);
+      }
+      console.log('⚠️  Block already exists, reinstalling...');
+    }
+
+    if (options.dryRun) {
+      console.log('🔍 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');
+      console.log('  - Update RenderBlocks component');
+      console.log('  - Register block in blok0-registry.json');
+      return;
+    }
+
+    // Step 4: Ensure blocks directory exists
+    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)}`);
+
+    // Step 6: Validate created block
+    const validation = validateBlockDirectory(dir);
+    if (!validation.valid) {
+      console.error('❌ Block validation failed:');
+      validation.errors.forEach(error => console.error(`  - ${error}`));
+      // Cleanup on failure
+      require('fs').rmSync(dir, { recursive: true, force: true });
+      process.exit(1);
+    }
+
+    // Step 7: Calculate checksums
+    const checksums = calculateDirectoryChecksums(dir);
+
+    // Step 8: Create registry entry
+    const blockEntry = createBlockEntry(
+      {
+        id: metadata.id,
+        name: metadata.name,
+        slug: metadata.slug,
+        sourceUrl: blockUrl
+      },
+      dir,
+      configPath,
+      componentPath,
+      checksums
+    );
+
+    // 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`);
+    } else {
+      console.warn('⚠️  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`);
+    } else {
+      console.warn('⚠️  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');
+
+  } catch (error) {
+    console.error('❌ Failed to add block:', (error as Error).message);
+    process.exit(1);
+  }
+}