luxlabs 1.0.0

package/commands/up.js

@@ -0,0 +1,211 @@
+const axios = require('axios');
+const archiver = require('archiver');
+const fs = require('fs');
+const path = require('path');
+const ora = require('ora');
+const chalk = require('chalk');
+const ignore = require('ignore');
+const {
+  loadConfig,
+  loadInterfaceConfig,
+  saveInterfaceConfig,
+  getApiUrl,
+  getAuthHeaders,
+  isAuthenticated,
+} = require('../lib/config');
+
+async function up(options) {
+  // Check authentication
+  if (!isAuthenticated()) {
+    console.log(
+      chalk.red('❌ Not authenticated. Run'),
+      chalk.white('lux login'),
+      chalk.red('first.')
+    );
+    process.exit(1);
+  }
+
+  // Check if initialized
+  const interfaceConfig = loadInterfaceConfig();
+  if (!interfaceConfig) {
+    console.log(
+      chalk.red('❌ Not initialized. Run'),
+      chalk.white('lux init'),
+      chalk.red('first.')
+    );
+    process.exit(1);
+  }
+
+  const config = loadConfig();
+  const apiUrl = getApiUrl();
+  const spinner = ora('Preparing upload...').start();
+
+  try {
+    let interfaceId = interfaceConfig.id;
+
+    // Step 1: Create interface if it doesn't exist
+    if (!interfaceId) {
+      spinner.text = 'Creating interface...';
+
+      const { data } = await axios.post(
+        `${apiUrl}/api/interfaces`,
+        {
+          name: interfaceConfig.name,
+          description: interfaceConfig.description,
+        },
+        {
+          headers: getAuthHeaders(),
+        }
+      );
+
+      interfaceId = data.interface.id;
+      interfaceConfig.id = interfaceId;
+      interfaceConfig.githubRepoUrl = data.interface.github_repo_url;
+      saveInterfaceConfig(interfaceConfig);
+
+      spinner.succeed(chalk.green(`Created interface: ${interfaceId}`));
+      spinner.start();
+    }
+
+    // Step 2: Create zip file
+    spinner.text = 'Creating zip file...';
+    const zipPath = await createZip(process.cwd());
+    const stats = fs.statSync(zipPath);
+    spinner.text = `Created zip (${formatBytes(stats.size)})...`;
+
+    // Step 3: Get presigned upload URL
+    spinner.text = 'Getting upload URL...';
+    const { data: urlData } = await axios.post(
+      `${apiUrl}/api/interfaces/${interfaceId}/presigned-urls`,
+      { zip_upload: true },
+      { headers: getAuthHeaders() }
+    );
+
+    // Step 4: Upload zip to R2
+    spinner.text = 'Uploading files...';
+    await axios.put(urlData.upload_url, fs.readFileSync(zipPath), {
+      headers: { 'Content-Type': 'application/zip' },
+      maxBodyLength: Infinity,
+      maxContentLength: Infinity,
+      onUploadProgress: (progressEvent) => {
+        const percent = Math.round(
+          (progressEvent.loaded * 100) / progressEvent.total
+        );
+        spinner.text = `Uploading files... ${percent}%`;
+      },
+    });
+
+    // Step 5: Trigger extraction and GitHub sync
+    spinner.text = 'Syncing to GitHub...';
+    const { data: uploadResult } = await axios.post(
+      `${apiUrl}/api/interfaces/${interfaceId}/upload-files`,
+      { zip_path: urlData.storage_path },
+      { headers: getAuthHeaders() }
+    );
+
+    // Cleanup
+    fs.unlinkSync(zipPath);
+
+    spinner.succeed(
+      chalk.green(`✓ Uploaded ${uploadResult.files_uploaded} files`)
+    );
+
+    console.log(chalk.dim(`\n${uploadResult.message}\n`));
+    console.log(chalk.cyan('Files synced to dev branch. Ready to deploy!'));
+    console.log(
+      chalk.dim(`Run ${chalk.white('lux deploy')} to publish to production\n`)
+    );
+
+    if (interfaceConfig.githubRepoUrl) {
+      console.log(chalk.dim(`GitHub: ${interfaceConfig.githubRepoUrl}`));
+    }
+  } catch (error) {
+    spinner.fail('Upload failed');
+    console.error(
+      chalk.red('\n❌ Error:'),
+      error.response?.data?.error || error.message
+    );
+
+    if (error.response?.status === 401) {
+      console.log(
+        chalk.yellow('\nYour session may have expired. Try running:'),
+        chalk.white('lux login')
+      );
+    }
+
+    process.exit(1);
+  }
+}
+
+async function createZip(sourceDir) {
+  const output = fs.createWriteStream('/tmp/lux-upload.zip');
+  const archive = archiver('zip', { zlib: { level: 9 } });
+
+  // Load .gitignore patterns
+  const ig = ignore();
+  const gitignorePath = path.join(sourceDir, '.gitignore');
+
+  if (fs.existsSync(gitignorePath)) {
+    const gitignoreContent = fs.readFileSync(gitignorePath, 'utf8');
+    ig.add(gitignoreContent);
+  }
+
+  // Add default ignores (same as server)
+  ig.add([
+    'node_modules/',
+    '.next/',
+    '.git/',
+    '.env.local',
+    '.DS_Store',
+    'dist/',
+    'build/',
+    '.cache/',
+    'coverage/',
+    '.lux/interface.json', // Don't upload local config
+  ]);
+
+  return new Promise((resolve, reject) => {
+    output.on('close', () => resolve('/tmp/lux-upload.zip'));
+    archive.on('error', reject);
+
+    archive.pipe(output);
+
+    // Recursively add files
+    function addDirectory(dirPath, baseDir = '') {
+      const files = fs.readdirSync(dirPath);
+
+      for (const file of files) {
+        const fullPath = path.join(dirPath, file);
+        const relativePath = path.join(baseDir, file);
+
+        // Check if ignored
+        if (ig.ignores(relativePath)) {
+          continue;
+        }
+
+        const stat = fs.statSync(fullPath);
+
+        if (stat.isDirectory()) {
+          addDirectory(fullPath, relativePath);
+        } else if (stat.isFile()) {
+          archive.file(fullPath, { name: relativePath });
+        }
+      }
+    }
+
+    addDirectory(sourceDir);
+    archive.finalize();
+  });
+}
+
+function formatBytes(bytes) {
+  if (bytes === 0) return '0 Bytes';
+  const k = 1024;
+  const sizes = ['Bytes', 'KB', 'MB', 'GB'];
+  const i = Math.floor(Math.log(bytes) / Math.log(k));
+  return Math.round((bytes / Math.pow(k, i)) * 100) / 100 + ' ' + sizes[i];
+}
+
+module.exports = {
+  up,
+};

package/commands/validate-data-lux.js

@@ -0,0 +1,502 @@
+/**
+ * Validate data-lux Attributes CLI Command
+ *
+ * Scans interface component files and reports interactive elements
+ * that are missing data-lux attributes.
+ *
+ * Usage:
+ *   node lux-cli.js validate-data-lux [interface-id]
+ *
+ * If interface-id is not provided, validates all interfaces.
+ */
+
+const fs = require('fs');
+const path = require('path');
+const chalk = require('chalk');
+const {
+  getInterfacesDir,
+  getOrgId,
+  getProjectId,
+  LUX_STUDIO_DIR,
+} = require('../lib/config');
+const { error, success, info, warn } = require('../lib/helpers');
+
+// Interactive elements that should have data-lux
+const INTERACTIVE_ELEMENTS = ['button', 'input', 'form', 'select', 'textarea'];
+
+// Event handlers that indicate an element is interactive
+const INTERACTIVE_HANDLERS = [
+  'onClick',
+  'onSubmit',
+  'onChange',
+  'onBlur',
+  'onFocus',
+  'onKeyDown',
+  'onKeyUp',
+  'onKeyPress',
+];
+
+/**
+ * Find all component files in a directory recursively
+ */
+function findComponentFiles(dir, files = []) {
+  if (!fs.existsSync(dir)) return files;
+
+  const entries = fs.readdirSync(dir, { withFileTypes: true });
+
+  for (const entry of entries) {
+    const fullPath = path.join(dir, entry.name);
+
+    // Skip node_modules and hidden directories
+    if (entry.name.startsWith('.') || entry.name === 'node_modules') {
+      continue;
+    }
+
+    if (entry.isDirectory()) {
+      findComponentFiles(fullPath, files);
+    } else if (entry.isFile() && /\.(tsx|jsx)$/.test(entry.name)) {
+      files.push(fullPath);
+    }
+  }
+
+  return files;
+}
+
+/**
+ * Find the end of a JSX element's opening tag, properly handling nested braces.
+ * Returns { endIndex, attributes } or null if not found.
+ *
+ * This handles cases like:
+ *   <input onChange={(e) => setValue(e)} data-lux={lux('name')} />
+ * where the `>` in `=>` should not end the tag.
+ */
+function findElementEnd(content, startIndex) {
+  let braceDepth = 0;
+  let i = startIndex;
+
+  while (i < content.length) {
+    const char = content[i];
+
+    if (char === '{') {
+      braceDepth++;
+    } else if (char === '}') {
+      braceDepth--;
+    } else if (char === '>' && braceDepth === 0) {
+      // Found the actual end of the opening tag
+      return {
+        endIndex: i,
+        attributes: content.substring(startIndex, i),
+      };
+    }
+
+    i++;
+  }
+
+  return null;
+}
+
+/**
+ * Find all matches of interactive elements with proper brace handling
+ */
+function findElementMatches(content, element) {
+  const matches = [];
+  const tagPattern = new RegExp(`<${element}\\b`, 'gi');
+  let tagMatch;
+
+  while ((tagMatch = tagPattern.exec(content)) !== null) {
+    const tagStart = tagMatch.index;
+    const attrStart = tagStart + tagMatch[0].length;
+
+    const result = findElementEnd(content, attrStart);
+    if (result) {
+      matches.push({
+        index: tagStart,
+        fullMatch: content.substring(tagStart, result.endIndex + 1),
+        attributes: result.attributes,
+      });
+    }
+  }
+
+  return matches;
+}
+
+/**
+ * Find all elements that have a specific handler, with proper brace handling
+ */
+function findElementsWithHandler(content, handler) {
+  const matches = [];
+  // Match any element opening tag
+  const tagPattern = /<(\w+)\b/g;
+  let tagMatch;
+
+  while ((tagMatch = tagPattern.exec(content)) !== null) {
+    const tagStart = tagMatch.index;
+    const elementName = tagMatch[1];
+    const attrStart = tagStart + tagMatch[0].length;
+
+    const result = findElementEnd(content, attrStart);
+    if (result) {
+      // Check if this element has the handler
+      const handlerPattern = new RegExp(`${handler}=`);
+      if (handlerPattern.test(result.attributes)) {
+        matches.push({
+          index: tagStart,
+          element: elementName.toLowerCase(),
+          fullMatch: content.substring(tagStart, result.endIndex + 1),
+          attributes: result.attributes,
+        });
+      }
+    }
+  }
+
+  return matches;
+}
+
+/**
+ * Check if an element is inside a .map() callback
+ * This is a heuristic check - looks for common patterns
+ */
+function isInsideMapCallback(content, elementIndex) {
+  // Look backwards from the element to find .map( pattern
+  const beforeElement = content.substring(0, elementIndex);
+  const lastMapIndex = beforeElement.lastIndexOf('.map(');
+  const lastCloseParen = beforeElement.lastIndexOf(')');
+
+  // If there's a .map( and it's not closed before our element, we're likely inside it
+  if (lastMapIndex > -1 && lastMapIndex > lastCloseParen) {
+    return true;
+  }
+
+  return false;
+}
+
+/**
+ * Extract element information from a match
+ */
+function extractElementInfo(content, elementStr, matchIndex) {
+  // Count line number
+  const beforeMatch = content.substring(0, matchIndex);
+  const lineNumber = (beforeMatch.match(/\n/g) || []).length + 1;
+
+  // Try to extract text content for buttons
+  let textContent = null;
+  const afterElement = content.substring(matchIndex);
+  const closingMatch = afterElement.match(/>([^<]*)</);
+  if (closingMatch && closingMatch[1].trim()) {
+    textContent = closingMatch[1].trim();
+  }
+
+  // Try to extract placeholder for inputs
+  const placeholderMatch = elementStr.match(/placeholder=["']([^"']+)["']/);
+  const placeholder = placeholderMatch ? placeholderMatch[1] : null;
+
+  // Try to extract name attribute
+  const nameMatch = elementStr.match(/name=["']([^"']+)["']/);
+  const name = nameMatch ? nameMatch[1] : null;
+
+  // Try to extract aria-label
+  const ariaMatch = elementStr.match(/aria-label=["']([^"']+)["']/);
+  const ariaLabel = ariaMatch ? ariaMatch[1] : null;
+
+  // Try to extract onClick handler name
+  const onClickMatch = elementStr.match(/onClick=\{(\w+)\}/);
+  const handlerName = onClickMatch ? onClickMatch[1] : null;
+
+  return {
+    lineNumber,
+    textContent,
+    placeholder,
+    name,
+    ariaLabel,
+    handlerName,
+    rawElement: elementStr.substring(0, 80) + (elementStr.length > 80 ? '...' : ''),
+  };
+}
+
+/**
+ * Generate a suggested name for the element
+ */
+function suggestName(element, info) {
+  // Priority: textContent > placeholder > name > ariaLabel > handlerName > generic
+  let suggestion = null;
+
+  if (info.textContent) {
+    suggestion = slugify(info.textContent);
+  } else if (info.placeholder) {
+    suggestion = slugify(info.placeholder) + '-input';
+  } else if (info.name) {
+    suggestion = slugify(info.name) + '-input';
+  } else if (info.ariaLabel) {
+    suggestion = slugify(info.ariaLabel);
+  } else if (info.handlerName) {
+    // Convert handleSubmit to submit, handleDeleteUser to delete-user
+    suggestion = slugify(info.handlerName.replace(/^handle/, ''));
+  }
+
+  // Fallback to generic name
+  if (!suggestion) {
+    suggestion = element + '-element';
+  }
+
+  // Append element type suffix if not present
+  if (element === 'button' && !suggestion.includes('button')) {
+    suggestion += '-button';
+  } else if (element === 'input' && !suggestion.includes('input')) {
+    suggestion += '-input';
+  } else if (element === 'form' && !suggestion.includes('form')) {
+    suggestion += '-form';
+  }
+
+  return suggestion;
+}
+
+/**
+ * Slugify a string for use as element name
+ */
+function slugify(str) {
+  return str
+    .toLowerCase()
+    .replace(/[^a-z0-9]+/g, '-')
+    .replace(/^-|-$/g, '')
+    .substring(0, 30); // Limit length
+}
+
+/**
+ * Validate a single component file
+ */
+function validateFile(filePath, repoDir) {
+  const content = fs.readFileSync(filePath, 'utf8');
+  const issues = [];
+  const relativePath = path.relative(repoDir, filePath);
+
+  // Check if file has 'use client' directive (only validate client components)
+  const isClientComponent = content.includes("'use client'") || content.includes('"use client"');
+
+  // Find interactive elements with proper brace handling
+  for (const element of INTERACTIVE_ELEMENTS) {
+    const matches = findElementMatches(content, element);
+
+    for (const match of matches) {
+      const attributes = match.attributes;
+      const matchIndex = match.index;
+
+      // Skip if already has data-lux
+      if (/data-lux/.test(attributes)) {
+        continue;
+      }
+
+      // Skip hidden inputs
+      if (element === 'input' && /type=["']hidden["']/.test(attributes)) {
+        continue;
+      }
+
+      // Skip if has spread props (can't determine)
+      if (/\{\s*\.\.\.\w+/.test(attributes)) {
+        continue;
+      }
+
+      // Skip if inside .map() callback
+      if (isInsideMapCallback(content, matchIndex)) {
+        continue;
+      }
+
+      const info = extractElementInfo(content, match.fullMatch, matchIndex);
+      const suggestedName = suggestName(element, info);
+
+      issues.push({
+        file: relativePath,
+        line: info.lineNumber,
+        element,
+        rawElement: info.rawElement,
+        suggestedName,
+        textContent: info.textContent,
+        placeholder: info.placeholder,
+      });
+    }
+  }
+
+  // Also check for any element with interactive handlers
+  for (const handler of INTERACTIVE_HANDLERS) {
+    const matches = findElementsWithHandler(content, handler);
+
+    for (const match of matches) {
+      const element = match.element;
+      const attributes = match.attributes;
+      const matchIndex = match.index;
+
+      // Skip if it's already an interactive element we checked
+      if (INTERACTIVE_ELEMENTS.includes(element)) {
+        continue;
+      }
+
+      // Skip if already has data-lux
+      if (/data-lux/.test(attributes)) {
+        continue;
+      }
+
+      // Skip if has spread props
+      if (/\{\s*\.\.\.\w+/.test(attributes)) {
+        continue;
+      }
+
+      // Skip if inside .map() callback
+      if (isInsideMapCallback(content, matchIndex)) {
+        continue;
+      }
+
+      const info = extractElementInfo(content, match.fullMatch, matchIndex);
+      const suggestedName = suggestName(element, info);
+
+      // Avoid duplicates
+      const isDuplicate = issues.some(
+        (issue) => issue.file === relativePath && issue.line === info.lineNumber
+      );
+      if (isDuplicate) continue;
+
+      issues.push({
+        file: relativePath,
+        line: info.lineNumber,
+        element,
+        rawElement: info.rawElement,
+        suggestedName,
+        handler,
+      });
+    }
+  }
+
+  return issues;
+}
+
+/**
+ * Validate an interface
+ */
+function validateInterface(interfaceId, interfacesDir) {
+  const interfaceDir = path.join(interfacesDir, interfaceId);
+  const repoDir = path.join(interfaceDir, 'repo');
+
+  if (!fs.existsSync(repoDir)) {
+    return { interfaceId, error: 'Interface repo not found', issues: [] };
+  }
+
+  // Find all component files
+  const componentFiles = findComponentFiles(repoDir);
+  const allIssues = [];
+
+  for (const file of componentFiles) {
+    const issues = validateFile(file, repoDir);
+    allIssues.push(...issues);
+  }
+
+  return { interfaceId, issues: allIssues };
+}
+
+/**
+ * List all interfaces in the project
+ */
+function listInterfaces(interfacesDir) {
+  if (!fs.existsSync(interfacesDir)) return [];
+
+  return fs.readdirSync(interfacesDir, { withFileTypes: true })
+    .filter((d) => d.isDirectory())
+    .map((d) => d.name);
+}
+
+/**
+ * Format and print results
+ */
+function printResults(results, outputJson = false) {
+  if (outputJson) {
+    console.log(JSON.stringify(results, null, 2));
+    return;
+  }
+
+  let totalIssues = 0;
+
+  for (const result of results) {
+    if (result.error) {
+      warn(`${result.interfaceId}: ${result.error}`);
+      continue;
+    }
+
+    if (result.issues.length === 0) continue;
+
+    totalIssues += result.issues.length;
+
+    console.log('');
+    console.log(chalk.bold(`Interface: ${result.interfaceId}`));
+    console.log(chalk.gray('─'.repeat(50)));
+
+    for (const issue of result.issues) {
+      console.log('');
+      console.log(chalk.yellow(`  ${issue.file}:${issue.line}`));
+      console.log(chalk.gray(`    ${issue.rawElement}`));
+      console.log(chalk.cyan(`    Suggested: data-lux={lux('${issue.suggestedName}')}`));
+    }
+  }
+
+  console.log('');
+
+  if (totalIssues === 0) {
+    success('All interactive elements have data-lux attributes!');
+    return { valid: true, totalIssues: 0 };
+  } else {
+    console.log(chalk.red(`\n❌ ${totalIssues} element(s) missing data-lux attributes`));
+    console.log('');
+    console.log(chalk.gray('To fix, add data-lux attributes using the createLux helper:'));
+    console.log(chalk.gray("  1. import { createLux } from '@/lib/lux';"));
+    console.log(chalk.gray("  2. const lux = createLux('ComponentName');"));
+    console.log(chalk.gray("  3. <button data-lux={lux('button-name')}>..."));
+    console.log('');
+    return { valid: false, totalIssues };
+  }
+}
+
+/**
+ * Main handler for validate-data-lux command
+ */
+async function handleValidateDataLux(args) {
+  const interfaceId = args[0];
+  const outputJson = args.includes('--json');
+
+  // Get interfaces directory
+  const interfacesDir = getInterfacesDir();
+  if (!interfacesDir) {
+    error('Could not determine interfaces directory. Are you logged in?');
+    return;
+  }
+
+  if (!fs.existsSync(interfacesDir)) {
+    error(`Interfaces directory not found: ${interfacesDir}`);
+    return;
+  }
+
+  let results = [];
+
+  if (interfaceId && interfaceId !== '--json') {
+    // Validate specific interface
+    results.push(validateInterface(interfaceId, interfacesDir));
+  } else {
+    // Validate all interfaces
+    const interfaces = listInterfaces(interfacesDir);
+
+    if (interfaces.length === 0) {
+      info('No interfaces found in this project.');
+      return;
+    }
+
+    console.log(chalk.gray(`Validating ${interfaces.length} interface(s)...`));
+
+    for (const iface of interfaces) {
+      results.push(validateInterface(iface, interfacesDir));
+    }
+  }
+
+  const summary = printResults(results, outputJson);
+
+  // Exit with error code if issues found (useful for CI)
+  if (summary && !summary.valid) {
+    process.exit(1);
+  }
+}
+
+module.exports = { handleValidateDataLux };