blok0 0.1.0 → 0.1.2

package/src/api/index.ts

@@ -0,0 +1,177 @@
+import axios, { AxiosInstance, AxiosResponse } from 'axios';
+import { getAuthHeader } from '../auth';
+
+export interface BlockMetadata {
+  id: number;
+  name: string;
+  slug: string;
+  codeFiles: Array<{
+    sourceCode?: {
+      name: string;
+      url: string;
+    };
+  }>;
+  _status: 'published' | 'draft';
+}
+
+export interface CodeFile {
+  name: string;
+  content: string;
+}
+
+class APIClient {
+  private client: AxiosInstance;
+  private baseURL: string;
+
+  constructor(baseURL: string = 'https://www.blok0.xyz') {
+    this.baseURL = baseURL;
+    this.client = axios.create({
+      baseURL,
+      timeout: 30000,
+      headers: {
+        'User-Agent': 'blok0-cli/1.0.0'
+      }
+    });
+
+    // Add auth header to all requests
+    this.client.interceptors.request.use(async (config) => {
+      const authHeader = await getAuthHeader();
+      if (authHeader) {
+        config.headers.Authorization = authHeader;
+        console.log(`🔐 API Request: ${config.method?.toUpperCase()} ${config.url}`);
+        console.log(`🔑 Authorization: ${authHeader}`);
+      } else {
+        console.log(`🚫 API Request: ${config.method?.toUpperCase()} ${config.url} (No auth)`);
+      }
+      return config;
+    });
+  }
+
+  /**
+   * Fetch block metadata from URL
+   */
+  async fetchBlockMetadata(url: string): Promise<BlockMetadata> {
+    try {
+      const response: AxiosResponse<BlockMetadata> = await this.client.get(url);
+      return response.data;
+    } catch (error) {
+      if (axios.isAxiosError(error)) {
+        if (error.response?.status === 401) {
+          throw new Error('Authentication required. Please run `blok0 login` first.');
+        }
+        if (error.response?.status === 404) {
+          throw new Error(`Block not found at URL: ${url}`);
+        }
+        throw new Error(`API request failed: ${error.response?.data?.message || error.message}`);
+      }
+      throw error;
+    }
+  }
+
+  /**
+   * Download source code file
+   */
+  async downloadSourceCode(url: string): Promise<string> {
+    try {
+      const response: AxiosResponse<string> = await this.client.get(url, {
+        responseType: 'text'
+      });
+      return response.data;
+    } catch (error) {
+      if (axios.isAxiosError(error)) {
+        throw new Error(`Failed to download source code from ${url}: ${error.message}`);
+      }
+      throw error;
+    }
+  }
+
+  /**
+   * Validate block metadata
+   */
+  validateBlockMetadata(metadata: BlockMetadata): void {
+    if (!metadata.id || typeof metadata.id !== 'number') {
+      throw new Error('Invalid block metadata: missing or invalid id');
+    }
+
+    if (!metadata.name || typeof metadata.name !== 'string') {
+      throw new Error('Invalid block metadata: missing or invalid name');
+    }
+
+    if (!metadata.slug || typeof metadata.slug !== 'string') {
+      throw new Error('Invalid block metadata: missing or invalid slug');
+    }
+
+    // Validate slug format
+    const slugRegex = /^[a-z0-9-]+$/;
+    if (!slugRegex.test(metadata.slug)) {
+      throw new Error('Invalid block slug format. Must contain only lowercase letters, numbers, and dashes.');
+    }
+
+    if (!metadata.codeFiles || !Array.isArray(metadata.codeFiles)) {
+      throw new Error('Invalid block metadata: missing or invalid codeFiles');
+    }
+
+    // Filter out malformed codeFiles entries
+    const validCodeFiles = metadata.codeFiles.filter(file => file.sourceCode && file.sourceCode.name && file.sourceCode.url);
+
+    if (validCodeFiles.length === 0) {
+      throw new Error('Invalid block metadata: no valid code files specified');
+    }
+
+    // Check for required files
+    const hasConfig = validCodeFiles.some(file => file.sourceCode!.name === 'config.ts');
+    if (!hasConfig) {
+      throw new Error('Invalid block metadata: config.ts file is required');
+    }
+
+    if (metadata._status !== 'published') {
+      throw new Error('Block is not published and cannot be installed');
+    }
+  }
+
+  /**
+   * Fetch complete block data including source files
+   */
+  async fetchBlockData(url: string): Promise<{ metadata: BlockMetadata; files: CodeFile[] }> {
+    const metadata = await this.fetchBlockMetadata(url);
+    this.validateBlockMetadata(metadata);
+
+    const files: CodeFile[] = [];
+
+    // Filter out malformed codeFiles entries (same logic as validation)
+    const validCodeFiles = metadata.codeFiles.filter(file => file.sourceCode && file.sourceCode.name && file.sourceCode.url);
+
+    for (const fileInfo of validCodeFiles) {
+      const { name, url: fileUrl } = fileInfo.sourceCode!;
+
+      // Resolve relative URLs
+      const resolvedUrl = fileUrl.startsWith('http') ? fileUrl : `${this.baseURL}${fileUrl}`;
+
+      try {
+        const content = await this.downloadSourceCode(resolvedUrl);
+        files.push({ name, content });
+      } catch (error) {
+        throw new Error(`Failed to download ${name}: ${(error as Error).message}`);
+      }
+    }
+
+    return { metadata, files };
+  }
+
+  /**
+   * Test API connectivity and authentication
+   */
+  async testConnection(): Promise<boolean> {
+    try {
+      // Try to access a test endpoint or just check auth header
+      const authHeader = await getAuthHeader();
+      return authHeader !== null;
+    } catch (error) {
+      return false;
+    }
+  }
+}
+
+// Export singleton instance
+export const apiClient = new APIClient();
+export { APIClient };

package/src/ast/index.ts

@@ -0,0 +1,368 @@
+import { Project, SyntaxKind, Node, ImportDeclaration, ObjectLiteralExpression, PropertyAssignment, ArrayLiteralExpression, StringLiteral, Identifier } from 'ts-morph';
+
+/**
+ * Update Payload page collection config to include new block
+ */
+export function updatePageCollectionConfig(pagesCollectionPath: string, blockConfigPath: string, blockName: string): void {
+  const project = new Project();
+  const sourceFile = project.addSourceFileAtPath(pagesCollectionPath);
+
+  // Check if block is already imported (do this first before any modifications)
+  const importDeclarations = sourceFile.getImportDeclarations();
+  const existingImport = importDeclarations.find(imp =>
+    imp.getModuleSpecifier().getLiteralValue() === blockConfigPath
+  );
+
+  let needsImport = !existingImport;
+  if (needsImport) {
+    // Add import statement
+    const lastImport = importDeclarations[importDeclarations.length - 1];
+    const importText = `\nimport { ${blockName} } from '${blockConfigPath}';\n`;
+    sourceFile.insertText(lastImport.getEnd(), importText);
+    sourceFile.saveSync(); // Save the import addition
+  }
+
+  // Re-load the source file after modification to get fresh AST
+  const updatedProject = new Project();
+  const updatedSourceFile = updatedProject.addSourceFileAtPath(pagesCollectionPath);
+
+  // Find the Pages collection export (fresh references)
+  const pagesExport = updatedSourceFile.getVariableDeclaration('Pages');
+  if (!pagesExport) {
+    throw new Error('Could not find Pages collection export');
+  }
+
+  const pagesObject = pagesExport.getInitializer();
+  if (!pagesObject || !Node.isObjectLiteralExpression(pagesObject)) {
+    throw new Error('Could not find Pages collection object');
+  }
+
+  // Find the fields array
+  const fieldsProperty = pagesObject.getProperty('fields');
+  if (!fieldsProperty || !Node.isPropertyAssignment(fieldsProperty)) {
+    throw new Error('Could not find fields property in Pages collection');
+  }
+
+  const fieldsArray = fieldsProperty.getInitializer();
+  if (!fieldsArray || !Node.isArrayLiteralExpression(fieldsArray)) {
+    throw new Error('Could not find fields array in Pages collection');
+  }
+
+  // Find the tabs array within fields
+  const tabsField = fieldsArray.getElements().find(element => {
+    if (Node.isObjectLiteralExpression(element)) {
+      const typeProperty = element.getProperty('type');
+      if (Node.isPropertyAssignment(typeProperty)) {
+        const initializer = typeProperty.getInitializer();
+        return Node.isStringLiteral(initializer) && initializer.getLiteralValue() === 'tabs';
+      }
+    }
+    return false;
+  });
+
+  if (!tabsField || !Node.isObjectLiteralExpression(tabsField)) {
+    throw new Error('Could not find tabs field in Pages collection');
+  }
+
+  const tabsProperty = tabsField.getProperty('tabs');
+  if (!tabsProperty || !Node.isPropertyAssignment(tabsProperty)) {
+    throw new Error('Could not find tabs property');
+  }
+
+  const tabsArray = tabsProperty.getInitializer();
+  if (!tabsArray || !Node.isArrayLiteralExpression(tabsArray)) {
+    throw new Error('Could not find tabs array');
+  }
+
+  // Find the "Content" tab (which contains the layout)
+  const contentTab = tabsArray.getElements().find(element => {
+    if (Node.isObjectLiteralExpression(element)) {
+      const labelProperty = element.getProperty('label');
+      if (Node.isPropertyAssignment(labelProperty)) {
+        const initializer = labelProperty.getInitializer();
+        return Node.isStringLiteral(initializer) && initializer.getLiteralValue() === 'Content';
+      }
+    }
+    return false;
+  });
+
+  if (!contentTab || !Node.isObjectLiteralExpression(contentTab)) {
+    throw new Error('Could not find Content tab in Pages collection');
+  }
+
+  // Find the layout field within the Content tab
+  const contentFields = contentTab.getProperty('fields');
+  if (!contentFields || !Node.isPropertyAssignment(contentFields)) {
+    throw new Error('Could not find fields in Content tab');
+  }
+
+  const contentFieldsArray = contentFields.getInitializer();
+  if (!contentFieldsArray || !Node.isArrayLiteralExpression(contentFieldsArray)) {
+    throw new Error('Could not find fields array in Content tab');
+  }
+
+  // Find the layout field
+  const layoutField = contentFieldsArray.getElements().find(element => {
+    if (Node.isObjectLiteralExpression(element)) {
+      const nameProperty = element.getProperty('name');
+      if (Node.isPropertyAssignment(nameProperty)) {
+        const initializer = nameProperty.getInitializer();
+        return Node.isStringLiteral(initializer) && initializer.getLiteralValue() === 'layout';
+      }
+    }
+    return false;
+  });
+
+  if (!layoutField || !Node.isObjectLiteralExpression(layoutField)) {
+    throw new Error('Could not find layout field');
+  }
+
+  // Find the blocks array
+  const blocksProperty = layoutField.getProperty('blocks');
+  if (!blocksProperty || !Node.isPropertyAssignment(blocksProperty)) {
+    throw new Error('Could not find blocks property in layout');
+  }
+
+  const blocksArray = blocksProperty.getInitializer();
+  if (!blocksArray || !Node.isArrayLiteralExpression(blocksArray)) {
+    throw new Error('Could not find blocks array in layout');
+  }
+
+  // Check if block is already in array
+  const existingElements = blocksArray.getElements();
+  const alreadyExists = existingElements.some(element => {
+    if (Node.isIdentifier(element)) {
+      return element.getText() === blockName;
+    }
+    return false;
+  });
+
+  if (!alreadyExists) {
+    // Add block to array
+    const lastElement = existingElements[existingElements.length - 1];
+    if (lastElement) {
+      blocksArray.insertElement(existingElements.length, blockName);
+    } else {
+      blocksArray.addElement(blockName);
+    }
+  }
+
+  updatedSourceFile.saveSync();
+}
+
+/**
+ * Update RenderBlocks.tsx to include new block component
+ */
+export function updateRenderBlocksComponent(componentPath: string, blockSlug: string, blockComponentPath: string): void {
+  // Extract the actual component name from the Component.tsx file
+  const fullComponentPath = require('path').resolve(blockComponentPath.replace('./', 'src/blocks/') + '.tsx');
+  const componentName = extractComponentName(fullComponentPath);
+
+  if (!componentName) {
+    throw new Error(`Could not extract component name from ${fullComponentPath}`);
+  }
+
+  // Convert slug to blockType key (camelCase)
+  const blockTypeKey = blockSlug.split('-').map((word, index) =>
+    index === 0 ? word : word.charAt(0).toUpperCase() + word.slice(1)
+  ).join('');
+
+  const project = new Project();
+  const sourceFile = project.addSourceFileAtPath(componentPath);
+
+  // Find the blockComponents object
+  const blockComponents = sourceFile.getVariableDeclaration('blockComponents')?.getInitializer();
+  if (!blockComponents || !Node.isObjectLiteralExpression(blockComponents)) {
+    throw new Error('Could not find blockComponents object in RenderBlocks.tsx');
+  }
+
+  // Check if component is already imported (check both default and named imports)
+  const importDeclarations = sourceFile.getImportDeclarations();
+  const existingImport = importDeclarations.find(imp => {
+    // Check default import
+    const defaultImport = imp.getDefaultImport();
+    if (defaultImport && defaultImport.getText() === componentName) {
+      return true;
+    }
+
+    // Check named imports
+    const namedImports = imp.getNamedImports();
+    return namedImports.some(namedImport => namedImport.getName() === componentName);
+  });
+
+  let needsImport = !existingImport;
+  if (needsImport) {
+    // Add import statement (named import)
+    const lastImport = importDeclarations[importDeclarations.length - 1];
+    const importText = `\nimport { ${componentName} } from '${blockComponentPath}';\n`;
+    sourceFile.insertText(lastImport.getEnd(), importText);
+    sourceFile.saveSync(); // Save the import addition
+  }
+
+  // Re-load the source file after modification to get fresh AST
+  const updatedProject = new Project();
+  const updatedSourceFile = updatedProject.addSourceFileAtPath(componentPath);
+  const updatedBlockComponents = updatedSourceFile.getVariableDeclaration('blockComponents')?.getInitializer();
+  if (!updatedBlockComponents || !Node.isObjectLiteralExpression(updatedBlockComponents)) {
+    throw new Error('Could not find blockComponents object in RenderBlocks.tsx after reload');
+  }
+
+  // Check if property already exists
+  const existingProperties = updatedBlockComponents.getProperties();
+  const propertyExists = existingProperties.some(prop => {
+    if (Node.isPropertyAssignment(prop)) {
+      const name = prop.getName();
+      return name === `'${blockTypeKey}'` || name === `"${blockTypeKey}"`;
+    }
+    return false;
+  });
+
+  if (!propertyExists) {
+    // Add new property to object
+    const lastProperty = existingProperties[existingProperties.length - 1];
+    if (lastProperty) {
+      const insertPos = lastProperty.getEnd();
+      const newPropertyText = `,\n  '${blockTypeKey}': ${componentName}`;
+      updatedSourceFile.insertText(insertPos, newPropertyText);
+    } else {
+      // Object is empty, add first property
+      const objectStart = updatedBlockComponents.getStart() + 1; // After opening brace
+      updatedSourceFile.insertText(objectStart, `\n  '${blockTypeKey}': ${componentName}\n`);
+    }
+  }
+
+  updatedSourceFile.saveSync();
+}
+
+/**
+ * Validate that a file can be parsed as TypeScript
+ */
+export function validateTypeScriptFile(filePath: string): { valid: boolean; errors: string[] } {
+  const errors: string[] = [];
+
+  try {
+    const project = new Project();
+    const sourceFile = project.addSourceFileAtPath(filePath);
+
+    // Check for syntax errors
+    const diagnostics = sourceFile.getPreEmitDiagnostics();
+    for (const diagnostic of diagnostics) {
+      errors.push(diagnostic.getMessageText().toString());
+    }
+  } catch (error) {
+    errors.push(`Failed to parse TypeScript file: ${(error as Error).message}`);
+  }
+
+  return { valid: errors.length === 0, errors };
+}
+
+/**
+ * Find Payload config file in project
+ */
+export function findPayloadConfig(): string | null {
+  const possiblePaths = [
+    'payload.config.ts',
+    'payload.config.js',
+    'src/payload.config.ts',
+    'src/payload.config.js'
+  ];
+
+  for (const path of possiblePaths) {
+    if (require('fs').existsSync(path)) {
+      return path;
+    }
+  }
+
+  return null;
+}
+
+/**
+ * Find RenderBlocks component file
+ */
+export function findRenderBlocksComponent(): string | null {
+  const possiblePaths = [
+    'src/blocks/RenderBlocks.tsx',
+    'src/blocks/RenderBlocks.ts',
+    'src/components/RenderBlocks.tsx',
+    'src/components/RenderBlocks.ts'
+  ];
+
+  for (const path of possiblePaths) {
+    if (require('fs').existsSync(path)) {
+      return path;
+    }
+  }
+
+  return null;
+}
+
+/**
+ * Find Pages collection file in project
+ */
+export function findPagesCollection(): string | null {
+  const possiblePaths = [
+    'src/collections/Pages/index.ts',
+    'src/collections/Pages.ts',
+    'src/collections/pages/index.ts',
+    'src/collections/pages.ts'
+  ];
+
+  for (const path of possiblePaths) {
+    if (require('fs').existsSync(path)) {
+      return path;
+    }
+  }
+
+  return null;
+}
+
+/**
+ * Extract the component name from a Component.tsx file
+ */
+export function extractComponentName(componentPath: string): string | null {
+  try {
+    const project = new Project();
+    const sourceFile = project.addSourceFileAtPath(componentPath);
+
+    // Look for named exports like "export const ComponentName"
+    const variableDeclarations = sourceFile.getVariableDeclarations();
+    for (const declaration of variableDeclarations) {
+      if (declaration.isExported()) {
+        const name = declaration.getName();
+        // Check if it's a React component (function or const with JSX)
+        const initializer = declaration.getInitializer();
+        if (initializer) {
+          // Look for React.FC or function patterns
+          const type = declaration.getType();
+          const typeText = type.getText();
+          if (typeText.includes('React.FC') || typeText.includes('FC<') ||
+              initializer.getText().includes('React.FC') || initializer.getText().includes('FC<')) {
+            return name;
+          }
+        }
+      }
+    }
+
+    // Look for export default statements
+    const defaultExport = sourceFile.getDefaultExportSymbol();
+    if (defaultExport) {
+      return defaultExport.getName();
+    }
+
+    // Look for export default expressions
+    const exportAssignments = sourceFile.getExportAssignments();
+    for (const assignment of exportAssignments) {
+      if (assignment.isExportEquals() === false) { // export default
+        const expression = assignment.getExpression();
+        if (expression) {
+          return expression.getText();
+        }
+      }
+    }
+
+    return null;
+  } catch (error) {
+    console.error('Error extracting component name:', error);
+    return null;
+  }
+}

package/src/auth/constants.ts

@@ -0,0 +1,155 @@
+export const AUTH_BASE_URL = 'https://www.blok0.xyz';
+export const AUTHORIZE_ENDPOINT = '/api/authorize/cli';
+export const DEFAULT_TIMEOUT = 5 * 60 * 1000; // 5 minutes
+export const PORT_RANGE = { min: 3000, max: 4000 };
+
+export const CALLBACK_PATH = '/callback';
+export const SUCCESS_HTML = `
+<!DOCTYPE html>
+<html>
+<head>
+    <title>Authentication Successful</title>
+    <style>
+        body {
+            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+            background: #f5f5f5;
+            margin: 0;
+            padding: 0;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            height: 100vh;
+        }
+        .container {
+            background: white;
+            padding: 2rem;
+            border-radius: 8px;
+            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
+            text-align: center;
+            max-width: 400px;
+        }
+        .success-icon {
+            color: #10b981;
+            font-size: 3rem;
+            margin-bottom: 1rem;
+        }
+        h1 {
+            color: #1f2937;
+            margin: 0 0 0.5rem 0;
+            font-size: 1.5rem;
+        }
+        p {
+            color: #6b7280;
+            margin: 0;
+        }
+    </style>
+</head>
+<body>
+    <div class="container">
+        <div class="success-icon">✓</div>
+        <h1>Authentication Successful!</h1>
+        <p>You can now close this window and return to your terminal.</p>
+    </div>
+</body>
+</html>
+`;
+
+export const ERROR_HTML = `
+<!DOCTYPE html>
+<html>
+<head>
+    <title>Authentication Failed</title>
+    <style>
+        body {
+            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+            background: #f5f5f5;
+            margin: 0;
+            padding: 0;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            height: 100vh;
+        }
+        .container {
+            background: white;
+            padding: 2rem;
+            border-radius: 8px;
+            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
+            text-align: center;
+            max-width: 400px;
+        }
+        .error-icon {
+            color: #ef4444;
+            font-size: 3rem;
+            margin-bottom: 1rem;
+        }
+        h1 {
+            color: #1f2937;
+            margin: 0 0 0.5rem 0;
+            font-size: 1.5rem;
+        }
+        p {
+            color: #6b7280;
+            margin: 0;
+        }
+    </style>
+</head>
+<body>
+    <div class="container">
+        <div class="error-icon">✗</div>
+        <h1>Authentication Failed</h1>
+        <p>Please try again or contact support if the problem persists.</p>
+    </div>
+</body>
+</html>
+`;
+
+export const TIMEOUT_HTML = `
+<!DOCTYPE html>
+<html>
+<head>
+    <title>Authentication Timeout</title>
+    <style>
+        body {
+            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+            background: #f5f5f5;
+            margin: 0;
+            padding: 0;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            height: 100vh;
+        }
+        .container {
+            background: white;
+            padding: 2rem;
+            border-radius: 8px;
+            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
+            text-align: center;
+            max-width: 400px;
+        }
+        .timeout-icon {
+            color: #f59e0b;
+            font-size: 3rem;
+            margin-bottom: 1rem;
+        }
+        h1 {
+            color: #1f2937;
+            margin: 0 0 0.5rem 0;
+            font-size: 1.5rem;
+        }
+        p {
+            color: #6b7280;
+            margin: 0;
+        }
+    </style>
+</head>
+<body>
+    <div class="container">
+        <div class="timeout-icon">⏱</div>
+        <h1>Authentication Timeout</h1>
+        <p>The authentication request has timed out. Please try again.</p>
+    </div>
+</body>
+</html>
+`;