offbyt 1.0.0 → 1.0.2

package/lib/utils/cliFormatter.js

@@ -0,0 +1,131 @@
+/**
+ * CLI Formatting Utilities
+ * Provides attractive visual output for Offbyt CLI
+ */
+
+import chalk from 'chalk';
+
+export function printBanner() {
+  console.log('\n');
+  console.log(chalk.bold.cyan('╔════════════════════════════════════════════════════════════════╗'));
+  console.log(chalk.bold.cyan('║                                                                ║'));
+  console.log(chalk.bold.cyan('║  ') + chalk.bold.blue('  ██████╗ ███████╗███████╗██████╗ ██╗   ██╗████████╗          ') + chalk.bold.cyan('║'));
+  console.log(chalk.bold.cyan('║  ') + chalk.bold.blue(' ██╔═══██╗██╔════╝██╔════╝██╔══██╗╚██╗ ██╔╝╚══██╔══╝          ') + chalk.bold.cyan('║'));
+  console.log(chalk.bold.cyan('║  ') + chalk.bold.blue(' ██║   ██║█████╗  █████╗  ██████╔╝ ╚████╔╝    ██║             ') + chalk.bold.cyan('║'));
+  console.log(chalk.bold.cyan('║  ') + chalk.bold.blue(' ██║   ██║██╔══╝  ██╔══╝  ██╔══██╗  ╚██╔╝     ██║             ') + chalk.bold.cyan('║'));
+  console.log(chalk.bold.cyan('║  ') + chalk.bold.blue(' ╚██████╔╝██║     ██║     ██████╔╝   ██║      ██║             ') + chalk.bold.cyan('║'));
+  console.log(chalk.bold.cyan('║  ') + chalk.bold.blue('  ╚═════╝ ╚═╝     ╚═╝     ╚═════╝    ╚═╝      ╚═╝             ') + chalk.bold.cyan('║'));
+  console.log(chalk.bold.cyan('║                                                                ║'));
+  console.log(chalk.bold.cyan('║        ') + chalk.bold.white('Backend Generator - Offline + AI Powered') + chalk.bold.cyan('                ║'));
+  console.log(chalk.bold.cyan('║                                                                ║'));
+  console.log(chalk.bold.cyan('╚════════════════════════════════════════════════════════════════╝'));
+  console.log('\n');
+}
+
+export function printSection(title) {
+  console.log(chalk.bold.cyan('\n╔' + '═'.repeat(title.length + 4) + '╗'));
+  console.log(chalk.bold.cyan('║  ' + title + '  ║'));
+  console.log(chalk.bold.cyan('╚' + '═'.repeat(title.length + 4) + '╝\n'));
+}
+
+export function printStep(number, total, title) {
+  console.log(chalk.bold.magenta(`\n>> STEP ${number}/${total}`) + chalk.bold.white(` :: ${title}`));
+  console.log(chalk.gray('═'.repeat(60)));
+}
+
+export function printSuccess(message) {
+  console.log(chalk.green('[OK] ') + chalk.white(message));
+}
+
+export function printWarning(message) {
+  console.log(chalk.yellow('[WARN] ') + chalk.white(message));
+}
+
+export function printError(message) {
+  console.log(chalk.red('[ERR] ') + chalk.white(message));
+}
+
+export function printInfo(message) {
+  console.log(chalk.cyan('[INFO] ') + chalk.white(message));
+}
+
+export function printBox(title, items = []) {
+  console.log(chalk.bold.cyan('┌─ ' + title));
+  for (const item of items) {
+    console.log(chalk.cyan('│  ') + chalk.white(item));
+  }
+  console.log(chalk.cyan('└─\n'));
+}
+
+export function printSummary(title, items = []) {
+  const safeItems = Array.isArray(items) ? items.map((i) => String(i)) : [];
+  const titleText = `  ${String(title || '').toUpperCase()}`;
+  const contentWidth = Math.max(64, titleText.length, ...safeItems.map((i) => i.length + 4));
+
+  console.log(chalk.bold.cyan(`\n╔${'═'.repeat(contentWidth)}╗`));
+  console.log(chalk.bold.cyan('║') + chalk.bold.green(chalk.bold.white(titleText.padEnd(contentWidth))) + chalk.bold.cyan('║'));
+  console.log(chalk.bold.cyan(`╠${'═'.repeat(contentWidth)}╣`));
+  
+  for (const item of safeItems) {
+    const line = ` - ${item}`;
+    console.log(chalk.bold.cyan('║') + chalk.white(line.padEnd(contentWidth)) + chalk.bold.cyan('║'));
+  }
+  
+  console.log(chalk.bold.cyan(`╚${'═'.repeat(contentWidth)}╝\n`));
+}
+
+export function printFooter(stepsInput = []) {
+  const nextSteps = Array.isArray(stepsInput) ? stepsInput.map((s) => String(s)) : [String(stepsInput)];
+  const contentWidth = Math.max(64, '  NEXT STEPS'.length, ...nextSteps.map((s, i) => `${i + 1}. ${s}`.length + 2));
+
+  console.log(chalk.bold.cyan(`\n╔${'═'.repeat(contentWidth)}╗`));
+  console.log(chalk.bold.cyan('║') + chalk.bold.yellow('  NEXT STEPS'.padEnd(contentWidth)) + chalk.bold.cyan('║'));
+  console.log(chalk.bold.cyan(`╠${'═'.repeat(contentWidth)}╣`));
+  
+  nextSteps.forEach((step, idx) => {
+    const line = ` ${idx + 1}. ${step}`;
+    console.log(chalk.bold.cyan('║') + chalk.white(line.padEnd(contentWidth)) + chalk.bold.cyan('║'));
+  });
+  
+  console.log(chalk.bold.cyan(`╚${'═'.repeat(contentWidth)}╝\n`));
+}
+
+export function printTable(headers, rows) {
+  const colWidths = headers.map((h, i) => {
+    return Math.max(h.length, Math.max(...rows.map(r => String(r[i] || '').length)));
+  });
+
+  // Header
+  console.log(chalk.bold.cyan('┌' + colWidths.map(w => '─'.repeat(w + 2)).join('┬') + '┐'));
+  console.log(
+    chalk.bold.cyan('│'),
+    colWidths.map((w, i) => chalk.bold.white(headers[i].padEnd(w))).join(chalk.bold.cyan(' │ ')),
+    chalk.bold.cyan('│')
+  );
+  console.log(chalk.bold.cyan('├' + colWidths.map(w => '─'.repeat(w + 2)).join('┼') + '┤'));
+
+  // Rows
+  rows.forEach((row) => {
+    console.log(
+      chalk.cyan('│'),
+      colWidths.map((w, i) => String(row[i] || '').padEnd(w)).join(chalk.cyan(' │ ')),
+      chalk.cyan('│')
+    );
+  });
+
+  console.log(chalk.bold.cyan('└' + colWidths.map(w => '─'.repeat(w + 2)).join('┴') + '┘\n'));
+}
+
+export default {
+  printBanner,
+  printSection,
+  printStep,
+  printSuccess,
+  printWarning,
+  printError,
+  printInfo,
+  printBox,
+  printSummary,
+  printFooter,
+  printTable
+};

package/lib/utils/codeInjector.js

@@ -10,9 +10,10 @@ import { globSync } from 'glob';
 /**
  * Inject API calls into frontend files
  */
-export function injectApiCalls(projectPath, resources) {
+export function injectApiCalls(projectPath, resources, options = {}) {
   const injectedFiles = [];
   const files = getFrontendFiles(projectPath);
+  const idField = options.idField || '_id';
 
   for (const file of files) {
     try {
@@ -23,7 +24,7 @@ export function injectApiCalls(projectPath, resources) {
       for (const resource of resources) {
         // Check if this file uses this resource
         if (usesResource(content, resource)) {
-          const result = injectForResource(content, resource);
+          const result = injectForResource(content, resource, { idField });
           if (result.modified) {
             content = result.content;
             modified = true;
@@ -70,13 +71,19 @@ function usesResource(content, resource) {
   const statePattern = new RegExp(`\\[\\s*${varName}\\s*,\\s*${setterName}\\s*\\]\\s*=\\s*useState\\(`, 'g');
   if (statePattern.test(content)) return true;
 
+  const staticArrayPattern = new RegExp(`const\\s+${varName}\\s*=\\s*\\[[\\s\\S]*?\\]\\s*;?`, 'g');
+  if (staticArrayPattern.test(content)) return true;
+
+  const mapPattern = new RegExp(`${varName}\\.map\\s*\\(`, 'g');
+  if (mapPattern.test(content)) return true;
+
   return false;
 }
 
 /**
  * Inject API calls for a specific resource
  */
-function injectForResource(content, resource) {
+function injectForResource(content, resource, options = {}) {
   let modified = false;
   let nextContent = content;
 
@@ -85,10 +92,20 @@ function injectForResource(content, resource) {
   const capitalSingular = capitalize(singular);
   const capitalResource = capitalize(resourceName);
 
-  const importResult = ensureUseEffectImport(nextContent);
+  const hasStaticArray = new RegExp(`const\\s+${resourceName}\\s*=\\s*\\[[\\s\\S]*?\\]\\s*;?`).test(nextContent);
+  const hasApiImplementation = hasResourceApiCalls(nextContent, resourceName);
+  if (hasApiImplementation && !hasStaticArray && options.force !== true) {
+    return { content: nextContent, modified: false };
+  }
+
+  const importResult = ensureReactHooksImport(nextContent, ['useEffect', 'useState']);
   nextContent = importResult.content;
   modified = modified || importResult.changed;
 
+  const staticToStateResult = convertStaticArrayToState(nextContent, resourceName, capitalResource);
+  nextContent = staticToStateResult.content;
+  modified = modified || staticToStateResult.changed;
+
   const apiUrlResult = ensureApiUrlConstant(nextContent);
   nextContent = apiUrlResult.content;
   modified = modified || apiUrlResult.changed;
@@ -125,15 +142,20 @@ function injectForResource(content, resource) {
   nextContent = deleteResult.content;
   modified = modified || deleteResult.changed;
 
-  const jsxResult = ensureMongoIdsInJsx(nextContent, capitalSingular);
+  const jsxResult = ensureIdsInJsx(nextContent, capitalSingular, options.idField || '_id');
   nextContent = jsxResult.content;
   modified = modified || jsxResult.changed;
 
   return { content: nextContent, modified };
 }
 
-function ensureUseEffectImport(content) {
-  if (/\buseEffect\b/.test(content)) {
+function ensureReactHooksImport(content, requiredHooks = []) {
+  if (!requiredHooks.length) {
+    return { content, changed: false };
+  }
+
+  const missing = requiredHooks.filter((hook) => !new RegExp(`\\b${hook}\\b`).test(content));
+  if (missing.length === 0) {
     return { content, changed: false };
   }
 
@@ -144,19 +166,64 @@ function ensureUseEffectImport(content) {
         .split(',')
         .map(name => name.trim())
         .filter(Boolean);
-      if (!cleaned.includes('useEffect')) {
-        cleaned.push('useEffect');
+
+      for (const hook of requiredHooks) {
+        if (!cleaned.includes(hook)) {
+          cleaned.push(hook);
+        }
       }
+
       return `import { ${cleaned.join(', ')} } from 'react';`;
     });
     return { content: next, changed: next !== content };
   }
 
+  const reactDefaultImport = /import\s+([A-Za-z_$][\w$]*)\s+from\s+['"]react['"];?/;
+  if (reactDefaultImport.test(content)) {
+    const next = content.replace(reactDefaultImport, (_, defaultName) => {
+      return `import ${defaultName}, { ${requiredHooks.join(', ')} } from 'react';`;
+    });
+    return { content: next, changed: next !== content };
+  }
+
   return { content, changed: false };
 }
 
+function convertStaticArrayToState(content, resourceName, capitalResource) {
+  const stateRegex = new RegExp(`const\\s+\\[\\s*${resourceName}\\s*,\\s*set${capitalResource}\\s*\\]\\s*=\\s*useState\\(`);
+  if (stateRegex.test(content)) {
+    return { content, changed: false };
+  }
+
+  const staticRegex = new RegExp(`const\\s+${resourceName}\\s*=\\s*\\[([\\s\\S]*?)\\]\\s*;?`);
+  const staticMatch = content.match(staticRegex);
+  if (!staticMatch) {
+    return { content, changed: false };
+  }
+
+  const replacement = `const [${resourceName}, set${capitalResource}] = useState([]);`;
+  const matchIndex = staticMatch.index ?? -1;
+
+  const componentStart = findPrimaryComponentStart(content);
+  if (componentStart !== -1 && matchIndex !== -1 && matchIndex < componentStart) {
+    // Remove top-level static data and declare hook state inside component scope.
+    const withoutStatic = content.replace(staticRegex, '');
+    const componentStartAfterRemoval = findPrimaryComponentStart(withoutStatic);
+    const insertPos = findFirstLineBreakAfterBrace(withoutStatic, componentStartAfterRemoval);
+    if (insertPos !== -1) {
+      const indentedReplacement = `\n  ${replacement}`;
+      const next = `${withoutStatic.slice(0, insertPos)}${indentedReplacement}${withoutStatic.slice(insertPos)}`;
+      return { content: next, changed: next !== content };
+    }
+  }
+
+  // If static array is already inside a component/function scope, replace in-place.
+  const next = content.replace(staticRegex, replacement);
+  return { content: next, changed: next !== content };
+}
+
 function ensureApiUrlConstant(content) {
-  if (/\b(API_URL|BACKEND_URL)\b/.test(content)) {
+  if (/\b(API_URL|API_BASE_URL|BACKEND_URL)\b/.test(content)) {
     return { content, changed: false };
   }
 
@@ -167,7 +234,7 @@ function ensureApiUrlConstant(content) {
 
   const lastImport = importMatches[importMatches.length - 1];
   const insertPos = lastImport.index + lastImport[0].length;
-  const next = `${content.slice(0, insertPos)}\n\nconst API_URL = 'http://localhost:5000/api';${content.slice(insertPos)}`;
+  const next = `${content.slice(0, insertPos)}\n\nconst API_BASE_URL =\n+  (typeof import.meta !== 'undefined' && import.meta.env && import.meta.env.VITE_API_URL) ||\n+  (typeof process !== 'undefined' && process.env && process.env.REACT_APP_API_URL) ||\n+  'http://localhost:5000';\n+const API_URL = \`${'${API_BASE_URL}'}/api\`;${content.slice(insertPos)}`;
   return { content: next, changed: true };
 }
 
@@ -195,7 +262,7 @@ function ensureFetchFunction(content, resourceName, capitalResource, fetchFuncti
   }
 
   const insertPos = content.indexOf(stateMatch[0]) + stateMatch[0].length;
-  const snippet = `\n\n  const ${fetchFunctionName} = async () => {\n    try {\n      const res = await fetch(\`\${API_URL}/${resourceName}\`);\n      const payload = await res.json();\n      set${capitalResource}(payload.data || []);\n    } catch (error) {\n      console.error('Error fetching ${resourceName}:', error);\n    }\n  };`;
+  const snippet = `\n\n  const ${fetchFunctionName} = async () => {\n    try {\n      const res = await fetch(\`\${API_URL}/${resourceName}\`);\n      if (!res.ok) {\n        throw new Error(\`Failed to fetch ${resourceName}: \${res.status}\`);\n      }\n      const payload = await res.json();\n      const list = Array.isArray(payload)\n        ? payload\n        : payload.data || payload.items || payload.results || [];\n      set${capitalResource}(Array.isArray(list) ? list : []);\n    } catch (error) {\n      console.error('Error fetching ${resourceName}:', error);\n    }\n  };`;
 
   const next = `${content.slice(0, insertPos)}${snippet}${content.slice(insertPos)}`;
   return { content: next, changed: true };
@@ -247,7 +314,7 @@ function replaceCreateHandler(content, ctx) {
   const initialStateLiteral = extractInitialStateLiteral(content, newStateName, setNewStateName) || '{}';
   const nonEmptyGuard = buildNonEmptyGuard(newStateName, initialStateLiteral);
 
-  const replacement = `const ${functionName} = async (e) => {\n    e.preventDefault();\n    ${nonEmptyGuard}\n\n    try {\n      const res = await fetch(\`\${API_URL}/${resourceName}\`, {\n        method: 'POST',\n        headers: { 'Content-Type': 'application/json' },\n        body: JSON.stringify(${newStateName}),\n      });\n\n      if (res.ok) {\n        await ${fetchFunctionName}();\n        ${setNewStateName}(${initialStateLiteral});\n      }\n    } catch (error) {\n      console.error('Error adding ${singular}:', error);\n    }\n  };\n\n`;
+  const replacement = `const ${functionName} = async (e) => {\n    e.preventDefault();\n    ${nonEmptyGuard}\n\n    try {\n      const res = await fetch(\`\${API_URL}/${resourceName}\`, {\n        method: 'POST',\n        headers: { 'Content-Type': 'application/json' },\n        body: JSON.stringify(${newStateName}),\n      });\n\n      if (res.ok) {\n        await ${fetchFunctionName}();\n        ${setNewStateName}(${initialStateLiteral});\n      } else {\n        console.error('Failed to add ${singular}:', res.status);\n      }\n    } catch (error) {\n      console.error('Error adding ${singular}:', error);\n    }\n  };\n\n`;
 
   const next = `${content.slice(0, block.start)}${replacement}${content.slice(block.end)}`;
   return { content: next, changed: true };
@@ -266,34 +333,49 @@ function replaceDeleteHandler(content, ctx) {
     return { content, changed: false };
   }
 
-  const replacement = `const ${functionName} = async (id) => {\n    try {\n      const res = await fetch(\`\${API_URL}/${resourceName}/\${id}\`, {\n        method: 'DELETE',\n      });\n\n      if (res.ok) {\n        await ${fetchFunctionName}();\n      }\n    } catch (error) {\n      console.error('Error deleting ${singular}:', error);\n    }\n  };\n\n`;
+  const replacement = `const ${functionName} = async (id) => {\n    try {\n      const res = await fetch(\`\${API_URL}/${resourceName}/\${id}\`, {\n        method: 'DELETE',\n      });\n\n      if (res.ok) {\n        await ${fetchFunctionName}();\n      } else {\n        console.error('Failed to delete ${singular}:', res.status);\n      }\n    } catch (error) {\n      console.error('Error deleting ${singular}:', error);\n    }\n  };\n\n`;
 
   const next = `${content.slice(0, block.start)}${replacement}${content.slice(block.end)}`;
   return { content: next, changed: true };
 }
 
-function ensureMongoIdsInJsx(content, capitalSingular) {
+function ensureIdsInJsx(content, capitalSingular, idField = '_id') {
   let next = content;
   let changed = false;
 
-  const keyReplaced = next.replace(/key=\{(\w+)\.id\}/g, 'key={$1._id}');
-  if (keyReplaced !== next) {
-    next = keyReplaced;
-    changed = true;
-  }
+  if (idField === '_id') {
+    const keyReplaced = next.replace(/key=\{(\w+)\.id\}/g, 'key={$1._id}');
+    if (keyReplaced !== next) {
+      next = keyReplaced;
+      changed = true;
+    }
+
+    const deleteCallPattern = new RegExp(`onClick=\\{\\(\\)\\s*=>\\s*delete${capitalSingular}\\((\\w+)\\.id\\)\\}`, 'g');
+    const clickReplaced = next.replace(deleteCallPattern, `onClick={() => delete${capitalSingular}($1._id)}`);
+    if (clickReplaced !== next) {
+      next = clickReplaced;
+      changed = true;
+    }
+  } else {
+    const keyReplaced = next.replace(/key=\{(\w+)\._id\}/g, 'key={$1.id}');
+    if (keyReplaced !== next) {
+      next = keyReplaced;
+      changed = true;
+    }
 
-  const deleteCallPattern = new RegExp(`onClick=\\{\\(\\)\\s*=>\\s*delete${capitalSingular}\\((\\w+)\\.id\\)\\}`, 'g');
-  const clickReplaced = next.replace(deleteCallPattern, `onClick={() => delete${capitalSingular}($1._id)}`);
-  if (clickReplaced !== next) {
-    next = clickReplaced;
-    changed = true;
+    const deleteCallPattern = new RegExp(`onClick=\\{\\(\\)\\s*=>\\s*delete${capitalSingular}\\((\\w+)\\._id\\)\\}`, 'g');
+    const clickReplaced = next.replace(deleteCallPattern, `onClick={() => delete${capitalSingular}($1.id)}`);
+    if (clickReplaced !== next) {
+      next = clickReplaced;
+      changed = true;
+    }
   }
 
   return { content: next, changed };
 }
 
 function extractInitialStateLiteral(content, stateName, setterName) {
-  const regex = new RegExp(`const\\s+\\[\\s*${stateName}\\s*,\\s*${setterName}\\s*\\]\\s*=\\s*useState\\((\\{[\\s\\S]*?\\})\\)`);
+  const regex = new RegExp(`const\\s+\\[\\s*${stateName}\\s*,\\s*${setterName}\\s*\\]\\s*=\\s*(?:React\\.)?useState\\((\\{[\\s\\S]*?\\})\\)`);
   const match = content.match(regex);
   return match ? match[1] : null;
 }
@@ -339,6 +421,42 @@ function findConstArrowFunction(content, functionName) {
   return { start: startMatch.index, end };
 }
 
+function findPrimaryComponentStart(content) {
+  const functionComponentMatch = /function\s+[A-Z][A-Za-z0-9_$]*\s*\([^)]*\)\s*\{/.exec(content);
+  if (functionComponentMatch) {
+    return functionComponentMatch.index;
+  }
+
+  const arrowComponentMatch = /const\s+[A-Z][A-Za-z0-9_$]*\s*=\s*(?:\([^)]*\)|[A-Za-z_$][\w$]*)\s*=>\s*\{/.exec(content);
+  if (arrowComponentMatch) {
+    return arrowComponentMatch.index;
+  }
+
+  return -1;
+}
+
+function findFirstLineBreakAfterBrace(content, startIndex) {
+  const braceIndex = content.indexOf('{', startIndex);
+  if (braceIndex === -1) return -1;
+
+  const lineBreakIndex = content.indexOf('\n', braceIndex);
+  if (lineBreakIndex === -1) return -1;
+
+  return lineBreakIndex + 1;
+}
+
+function hasResourceApiCalls(content, resourceName) {
+  const escaped = escapeRegExp(resourceName);
+  const quotedOrTemplatePath = '(["\'])[^\\n]*?\\/api\\/' + escaped + '[^\\n]*?\\1|`[^`]*?\\/api\\/' + escaped + '[^`]*?`';
+  const fetchPattern = new RegExp('fetch\\s*\\(\\s*(?:' + quotedOrTemplatePath + ')', 'i');
+  const axiosPattern = new RegExp('axios\\.(get|post|put|patch|delete)\\s*\\(\\s*(?:' + quotedOrTemplatePath + ')', 'i');
+  return fetchPattern.test(content) || axiosPattern.test(content);
+}
+
+function escapeRegExp(value) {
+  return String(value).replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+}
+
 /**
  * Capitalize string
  */