frontend-hamroun 1.2.40 → 1.2.42

package/bin/cli.js

@@ -1,71 +1,30 @@
+#!/usr/bin/env node
+
 import { Command } from 'commander';
 import inquirer from 'inquirer';
 import chalk from 'chalk';
-import gradient from 'gradient-string';
 import { createSpinner } from 'nanospinner';
 import path from 'path';
 import fs from 'fs-extra';
 import { fileURLToPath } from 'url';
 import { exec } from 'child_process';
 import { promisify } from 'util';
-import boxen from 'boxen';
-import terminalLink from 'terminal-link';
-import updateNotifier from 'update-notifier';
-import ora from 'ora';
-import figlet from 'figlet';
 
 // Convert to ESM-friendly __dirname equivalent
 const __filename = fileURLToPath(import.meta.url);
 const __dirname = path.dirname(__filename);
 const execAsync = promisify(exec);
 
-// Check for package updates
-try {
-  const pkg = JSON.parse(fs.readFileSync(path.join(__dirname, '..', 'package.json'), 'utf8'));
-  const notifier = updateNotifier({ pkg, updateCheckInterval: 1000 * 60 * 60 * 24 });
-  
-  if (notifier.update) {
-    const updateMessage = boxen(
-      `Update available: ${chalk.dim(notifier.update.current)} → ${chalk.green(notifier.update.latest)}\n` +
-      `Run ${chalk.cyan('npm i -g frontend-hamroun')} to update`,
-      {
-        padding: 1,
-        margin: 1,
-        borderStyle: 'round',
-        borderColor: 'cyan'
-      }
-    );
-    console.log(updateMessage);
-  }
-} catch (error) {
-  // Silently continue if update check fails
-}
-
 // CLI instance
 const program = new Command();
 
-// Create beautiful ASCII art banner with gradient colors
-const displayBanner = () => {
-  const titleText = figlet.textSync('Frontend Hamroun', { 
-    font: 'Standard',
-    horizontalLayout: 'default',
-    verticalLayout: 'default' 
-  });
-  
-  console.log('\n' + gradient.pastel.multiline(titleText));
-  
-  console.log(boxen(
-    `${chalk.bold('A lightweight full-stack JavaScript framework')}\n\n` +
-    `${chalk.dim('Version:')} ${chalk.cyan(JSON.parse(fs.readFileSync(path.join(__dirname, '..', 'package.json'), 'utf8')).version)}\n` +
-    `${chalk.dim('Documentation:')} ${terminalLink('frontendhamroun.io', 'https://github.com/hamroun/frontend-hamroun')}`,
-    {
-      padding: 1,
-      margin: { top: 1, bottom: 1 },
-      borderStyle: 'round',
-      borderColor: 'cyan'
-    }
-  ));
-};
+// Create ASCII art banner
+const banner = `
+${chalk.blue('╔══════════════════════════════════════════════╗')}
+${chalk.blue('║')}  ${chalk.bold.cyan('Frontend Hamroun')}                            ${chalk.blue('║')}
+${chalk.blue('║')}  ${chalk.yellow('A lightweight full-stack JavaScript framework')}  ${chalk.blue('║')}
+${chalk.blue('╚══════════════════════════════════════════════╝')}
+`;
 
 // Version and description
 program
@@ -76,320 +35,149 @@ program
 // Helper for creating visually consistent sections
 const createSection = (title) => {
   console.log('\n' + chalk.bold.cyan(`◆ ${title}`));
-  console.log(chalk.cyan('─'.repeat(60)) + '\n');
+  console.log(chalk.cyan('─'.repeat(50)) + '\n');
 };
 
-// Helper for checking dependencies with improved feedback
+// Helper for checking dependencies
 async function checkDependencies() {
-  const spinner = ora({
-    text: 'Checking environment...',
-    spinner: 'dots',
-    color: 'cyan'
-  }).start();
+  const spinner = createSpinner('Checking dependencies...').start();
   
   try {
-    // Check Node version
-    const nodeVersionOutput = await execAsync('node --version');
-    const nodeVersion = nodeVersionOutput.stdout.trim().replace('v', '');
-    const requiredNodeVersion = '14.0.0';
-    
-    if (compareVersions(nodeVersion, requiredNodeVersion) < 0) {
-      spinner.fail(`Node.js ${requiredNodeVersion}+ required, but found ${nodeVersion}`);
-      console.log(chalk.yellow(`Please upgrade Node.js: ${terminalLink('https://nodejs.org', 'https://nodejs.org')}`));
-      return false;
-    }
-    
-    // Check npm version
-    const npmVersionOutput = await execAsync('npm --version');
-    const npmVersion = npmVersionOutput.stdout.trim();
-    const requiredNpmVersion = '6.0.0';
-    
-    if (compareVersions(npmVersion, requiredNpmVersion) < 0) {
-      spinner.fail(`npm ${requiredNpmVersion}+ required, but found ${npmVersion}`);
-      console.log(chalk.yellow(`Please upgrade npm: ${chalk.cyan('npm install -g npm')}`));
-      return false;
-    }
-    
-    spinner.succeed(`Environment ready: Node ${chalk.green(nodeVersion)}, npm ${chalk.green(npmVersion)}`);
+    await execAsync('npm --version');
+    spinner.success({ text: 'Dependencies verified' });
     return true;
   } catch (error) {
-    spinner.fail('Environment check failed');
+    spinner.error({ text: 'Missing required dependencies' });
     console.log(chalk.red('Error: Node.js and npm are required to use this tool.'));
     return false;
   }
 }
 
-// Compare versions helper
-function compareVersions(a, b) {
-  const aParts = a.split('.').map(Number);
-  const bParts = b.split('.').map(Number);
-  
-  for (let i = 0; i < Math.max(aParts.length, bParts.length); i++) {
-    const aVal = aParts[i] || 0;
-    const bVal = bParts[i] || 0;
-    
-    if (aVal > bVal) return 1;
-    if (aVal < bVal) return -1;
-  }
-  
-  return 0;
-}
-
-// Choose template interactively with improved visualization
+// Choose template interactively
 async function chooseTemplate() {
   const templatesPath = path.join(__dirname, '..', 'templates');
-  const templates = fs.readdirSync(templatesPath).filter(file =>
+  const templates = fs.readdirSync(templatesPath).filter(file => 
     fs.statSync(path.join(templatesPath, file)).isDirectory()
   );
   
-  // Emoji indicators for templates
-  const templateIcons = {
-    'basic-app': '🚀',
-    'ssr-template': '🌐',
-    'fullstack-app': '⚡',
-  };
-
-  // Detailed descriptions
-  const templateDescriptions = {
-    'basic-app': 'Single-page application with just the essentials. Perfect for learning the framework or building simple apps.',
-    'ssr-template': 'Server-side rendered application with hydration. Optimized for SEO and fast initial load.',
-    'fullstack-app': 'Complete solution with API routes, authentication, and database integration ready to go.'
-  };
-  
-  console.log(boxen(
-    `${chalk.bold('Available Project Templates')}\n\n` +
-    templates.map(template => {
-      const icon = templateIcons[template] || '📦';
-      const shortDesc = {
-        'basic-app': 'Simple client-side application',
-        'ssr-template': 'Server-side rendering with hydration',
-        'fullstack-app': 'Complete fullstack application with API'
-      }[template] || 'Application template';
-      
-      return `${icon} ${chalk.cyan(template)}\n   ${chalk.dim(shortDesc)}`;
-    }).join('\n\n'),
-    {
-      padding: 1,
-      margin: 1,
-      borderStyle: 'round',
-      borderColor: 'cyan'
+  // Create template descriptions
+  const templateOptions = templates.map(template => {
+    let description = '';
+    
+    switch (template) {
+      case 'basic-app':
+        description = 'Simple client-side application with minimal setup';
+        break;
+      case 'ssr-template':
+        description = 'Server-side rendering with hydration support';
+        break;
+      case 'fullstack-app':
+        description = 'Complete fullstack application with API routes';
+        break;
+      default:
+        description = 'Application template';
     }
-  ));
-  
-  const templateChoices = templates.map(template => ({
-    name: `${templateIcons[template] || '📦'} ${chalk.bold(template)}`,
-    value: template,
-    description: templateDescriptions[template] || 'An application template'
-  }));
+    
+    return {
+      name: `${template} - ${chalk.dim(description)}`,
+      value: template
+    };
+  });
   
   const answers = await inquirer.prompt([
     {
       type: 'list',
       name: 'template',
-      message: chalk.green('Select a project template:'),
-      choices: templateChoices,
-      loop: false,
-      pageSize: 10
-    },
-    {
-      type: 'confirm',
-      name: 'viewDetails',
-      message: 'Would you like to see template details before proceeding?',
-      default: false
+      message: 'Select a project template:',
+      choices: templateOptions,
+      loop: false
     }
   ]);
   
-  if (answers.viewDetails) {
-    const detailedDescription = {
-      'basic-app': [
-        `${chalk.bold('Basic App Template')} ${templateIcons['basic-app']}`,
-        '',
-        `${chalk.dim('A lightweight client-side application template.')}`,
-        '',
-        `${chalk.yellow('Features:')}`,
-        '• No build step required for development',
-        '• Built-in state management with hooks',
-        '• Component-based architecture',
-        '• Tailwind CSS integration',
-        '',
-        `${chalk.yellow('Best for:')}`,
-        '• Simple web applications',
-        '• Learning the framework',
-        '• Quick prototyping',
-      ],
-      'ssr-template': [
-        `${chalk.bold('SSR Template')} ${templateIcons['ssr-template']}`,
-        '',
-        `${chalk.dim('Server-side rendering with client hydration.')}`,
-        '',
-        `${chalk.yellow('Features:')}`,
-        '• React-like development experience',
-        '• SEO-friendly rendered HTML',
-        '• Fast initial page load',
-        '• Smooth client-side transitions',
-        '• Built-in dynamic meta tag generation',
-        '',
-        `${chalk.yellow('Best for:')}`,
-        '• Production websites needing SEO',
-        '• Content-focused applications',
-        '• Sites requiring social sharing previews'
-      ],
-      'fullstack-app': [
-        `${chalk.bold('Fullstack App Template')} ${templateIcons['fullstack-app']}`,
-        '',
-        `${chalk.dim('Complete solution with frontend and backend.')}`,
-        '',
-        `${chalk.yellow('Features:')}`,
-        '• API routes with Express integration',
-        '• File-based routing system',
-        '• Authentication system with JWT',
-        '• Database connectors (MongoDB, MySQL, PostgreSQL)',
-        '• Server-side rendering with hydration',
-        '• WebSocket support',
-        '',
-        `${chalk.yellow('Best for:')}`,
-        '• Full production applications',
-        '• Apps needing authentication',
-        '• Projects requiring database integration'
-      ]
-    }[answers.template] || ['No detailed information available for this template'];
-    
-    console.log(boxen(detailedDescription.join('\n'), {
-      padding: 1,
-      margin: 1,
-      title: answers.template,
-      titleAlignment: 'center',
-      borderStyle: 'round',
-      borderColor: 'yellow'
-    }));
-    
-    const proceed = await inquirer.prompt([{
-      type: 'confirm',
-      name: 'continue',
-      message: 'Continue with this template?',
-      default: true
-    }]);
-    
-    if (!proceed.continue) {
-      return chooseTemplate();
-    }
-  }
-  
   return answers.template;
 }
 
-// Create a new project with enhanced visuals and status updates
+// Create a new project
 async function createProject(projectName, options) {
-  displayBanner();
+  console.log(banner);
   createSection('Project Setup');
-
+  
+  // Validate project name
   if (!projectName) {
     const answers = await inquirer.prompt([
       {
         type: 'input',
         name: 'projectName',
-        message: chalk.green('What is your project name?'),
+        message: 'What is your project name?',
         default: 'my-frontend-app',
-        validate: input =>
-          /^[a-z0-9-_]+$/.test(input)
-            ? true
-            : 'Project name can only contain lowercase letters, numbers, hyphens, and underscores'
+        validate: input => /^[a-z0-9-_]+$/.test(input) ? true : 'Project name can only contain lowercase letters, numbers, hyphens and underscores'
       }
     ]);
     projectName = answers.projectName;
   }
-
-  if (!await checkDependencies()) return;
-
-  let template = options.template || await chooseTemplate();
-
+  
+  // Check if dependencies are installed
+  if (!await checkDependencies()) {
+    return;
+  }
+  
+  // Choose template if not specified
+  let template = options.template;
+  if (!template) {
+    template = await chooseTemplate();
+  }
+  
+  // Create project directory
   const targetDir = path.resolve(projectName);
   const templateDir = path.join(__dirname, '..', 'templates', template);
-
+  
   if (fs.existsSync(targetDir)) {
     const answers = await inquirer.prompt([
       {
         type: 'confirm',
         name: 'overwrite',
-        message: chalk.yellow(`Directory ${projectName} already exists. Overwrite?`),
+        message: `Directory ${projectName} already exists. Continue and overwrite existing files?`,
         default: false
       }
     ]);
+    
     if (!answers.overwrite) {
-      console.log(chalk.red('✖ Operation cancelled'));
+      console.log(chalk.yellow('✖ Operation cancelled'));
       return;
     }
   }
-
-  // Multi-step execution with progress reporting
-  console.log(chalk.dim('\nCreating your new project...'));
   
-  // Step 1: Create directory
-  const step1 = ora({text: 'Creating project directory', color: 'cyan'}).start();
+  // Copy template
+  const spinner = createSpinner('Creating project...').start();
   try {
     await fs.ensureDir(targetDir);
-    step1.succeed();
-  } catch (error) {
-    step1.fail();
-    console.error(chalk.red(`Error creating directory: ${error.message}`));
-    return;
-  }
-  
-  // Step 2: Copy template files
-  const step2 = ora({text: 'Copying template files', color: 'cyan'}).start();
-  try {
     await fs.copy(templateDir, targetDir, { overwrite: true });
-    step2.succeed();
-  } catch (error) {
-    step2.fail();
-    console.error(chalk.red(`Error copying files: ${error.message}`));
-    return;
-  }
-  
-  // Step 3: Update package.json
-  const step3 = ora({text: 'Configuring package.json', color: 'cyan'}).start();
-  try {
+    
+    // Create package.json with project name
     const pkgJsonPath = path.join(targetDir, 'package.json');
     if (fs.existsSync(pkgJsonPath)) {
       const pkgJson = await fs.readJson(pkgJsonPath);
       pkgJson.name = projectName;
       await fs.writeJson(pkgJsonPath, pkgJson, { spaces: 2 });
-      step3.succeed();
-    } else {
-      step3.warn('No package.json found in template');
     }
+    
+    spinner.success({ text: `Project created successfully at ${chalk.green(targetDir)}` });
+    
+    // Show next steps
+    createSection('Next Steps');
+    console.log(`${chalk.bold.green('✓')} Run the following commands to get started:\n`);
+    console.log(`  ${chalk.cyan('cd')} ${projectName}`);
+    console.log(`  ${chalk.cyan('npm install')}`);
+    console.log(`  ${chalk.cyan('npm run dev')}\n`);
   } catch (error) {
-    step3.fail();
-    console.error(chalk.red(`Error updating package.json: ${error.message}`));
-    return;
+    spinner.error({ text: 'Failed to create project' });
+    console.error(chalk.red('Error: ') + error.message);
   }
-  
-  // Final success message with helpful instructions
-  console.log('\n' + boxen(
-    `${chalk.bold.green('Project created successfully!')}\n\n` +
-    `${chalk.bold('Project:')} ${chalk.cyan(projectName)}\n` +
-    `${chalk.bold('Template:')} ${chalk.cyan(template)}\n` +
-    `${chalk.bold('Location:')} ${chalk.cyan(targetDir)}\n\n` +
-    `${chalk.bold.yellow('Next steps:')}\n\n` +
-    `  ${chalk.dim('1.')} ${chalk.cyan(`cd ${projectName}`)}\n` +
-    `  ${chalk.dim('2.')} ${chalk.cyan('npm install')}\n` +
-    `  ${chalk.dim('3.')} ${chalk.cyan('npm run dev')}\n\n` +
-    `${chalk.dim('For help and documentation:')} ${terminalLink('frontendhamroun.io', 'https://github.com/hamroun/frontend-hamroun')}`,
-    {
-      padding: 1,
-      margin: 1,
-      borderStyle: 'round',
-      borderColor: 'green'
-    }
-  ));
-  
-  // Suggest next command
-  console.log(`\n${chalk.cyan('Tip:')} Run ${chalk.bold.green(`cd ${projectName} && npm install`)} to get started right away.\n`);
 }
 
-// Add component with improved interactive experience
+// Add component to existing project
 async function addComponent(componentName, options) {
-  displayBanner();
+  console.log(banner);
   createSection('Create Component');
   
   // Validate component name
@@ -398,7 +186,7 @@ async function addComponent(componentName, options) {
       {
         type: 'input',
         name: 'componentName',
-        message: chalk.green('What is your component name?'),
+        message: 'What is your component name?',
         validate: input => /^[A-Z][A-Za-z0-9]*$/.test(input) 
           ? true 
           : 'Component name must start with uppercase letter and only contain alphanumeric characters'
@@ -415,309 +203,365 @@ async function addComponent(componentName, options) {
       {
         type: 'list',
         name: 'extension',
-        message: chalk.green('Select file type:'),
+        message: 'Select file type:',
         choices: [
-          { 
-            name: 'TypeScript (.tsx)', 
-            value: '.tsx',
-            description: 'TypeScript with JSX support'
-          },
-          { 
-            name: 'JavaScript (.jsx)', 
-            value: '.jsx',
-            description: 'JavaScript with JSX support'
-          }
+          { name: 'TypeScript (.tsx)', value: '.tsx' },
+          { name: 'JavaScript (.jsx)', value: '.jsx' }
         ]
       }
     ]);
     extension = answers.extension;
   }
   
-  // Determine component directory with auto-detection
-  let componentPath = options.path;
-  
-  if (!componentPath) {
-    // Try to auto-detect common component directories
-    const potentialPaths = ['src/components', 'components', 'src/app/components', 'app/components'];
-    const existingPaths = potentialPaths.filter(p => fs.existsSync(path.join(process.cwd(), p)));
-    
-    if (existingPaths.length > 0) {
-      const answers = await inquirer.prompt([
-        {
-          type: 'list',
-          name: 'path',
-          message: chalk.green('Where do you want to create this component?'),
-          choices: [
-            ...existingPaths.map(p => ({ name: `${p} ${chalk.dim('(detected)')}`, value: p })),
-            { name: 'Custom location...', value: 'custom' }
-          ]
-        }
-      ]);
-      
-      if (answers.path === 'custom') {
-        const customPath = await inquirer.prompt([
-          {
-            type: 'input',
-            name: 'customPath',
-            message: chalk.green('Enter the component path:'),
-            default: 'src/components',
-            validate: input => /^[a-zA-Z0-9-_/\\]+$/.test(input) 
-              ? true 
-              : 'Path can only contain letters, numbers, slashes, hyphens and underscores'
-          }
-        ]);
-        componentPath = customPath.customPath;
-      } else {
-        componentPath = answers.path;
+  // Determine component directory
+  let componentPath = options.path || 'src/components';
+  if (!options.path) {
+    const answers = await inquirer.prompt([
+      {
+        type: 'input',
+        name: 'path',
+        message: 'Where do you want to create this component?',
+        default: 'src/components',
+        validate: input => /^[a-zA-Z0-9-_/\\]+$/.test(input) ? true : 'Path can only contain letters, numbers, slashes, hyphens and underscores'
       }
-    } else {
-      const answers = await inquirer.prompt([
-        {
-          type: 'input',
-          name: 'path',
-          message: chalk.green('Where do you want to create this component?'),
-          default: 'src/components',
-          validate: input => /^[a-zA-Z0-9-_/\\]+$/.test(input) 
-            ? true 
-            : 'Path can only contain letters, numbers, slashes, hyphens and underscores'
-        }
-      ]);
-      componentPath = answers.path;
-    }
+    ]);
+    componentPath = answers.path;
   }
   
-  // Component template features
-  const features = await inquirer.prompt([
-    {
-      type: 'checkbox',
-      name: 'features',
-      message: chalk.green('Select component features:'),
-      choices: [
-        { name: 'useState Hook', value: 'useState', checked: true },
-        { name: 'useEffect Hook', value: 'useEffect' },
-        { name: 'CSS Module', value: 'cssModule' },
-        { name: 'PropTypes', value: 'propTypes' },
-        { name: 'Default Props', value: 'defaultProps' }
-      ]
-    }
-  ]);
-  
-  // Create component content based on type and selected features
+  // Create component content based on type
   const fullPath = path.join(process.cwd(), componentPath, `${componentName}${extension}`);
   const dirPath = path.dirname(fullPath);
   
-  // CSS Module path if selected
-  let cssPath = null;
-  if (features.features.includes('cssModule')) {
-    cssPath = path.join(dirPath, `${componentName}.module.css`);
-  }
-  
-  // Build component template
-  let imports = [];
-  let hooks = [];
-  let props = [];
-  let propsInterface = [];
-  let renders = [];
-  let exports = [];
-  
-  // Base imports
-  imports.push(`import { jsx } from 'frontend-hamroun';`);
-  
-  // Add selected features
-  if (features.features.includes('useState')) {
-    imports[0] = imports[0].replace('jsx', 'jsx, useState');
-    hooks.push(`  const [state, setState] = useState('initial state');`);
+  // Sample template
+  const componentTemplate = extension === '.tsx' 
+    ? `import { jsx } from 'frontend-hamroun';
+
+interface ${componentName}Props {
+  title?: string;
+  children?: any;
+}
+
+export default function ${componentName}({ title, children }: ${componentName}Props) {
+  return (
+    <div className="component">
+      {title && <h2>{title}</h2>}
+      <div className="content">
+        {children}
+      </div>
+    </div>
+  );
+}
+`
+    : `import { jsx } from 'frontend-hamroun';
+
+export default function ${componentName}({ title, children }) {
+  return (
+    <div className="component">
+      {title && <h2>{title}</h2>}
+      <div className="content">
+        {children}
+      </div>
+    </div>
+  );
+}
+`;
+
+  // Create the file
+  const spinner = createSpinner(`Creating ${componentName} component...`).start();
+  try {
+    await fs.ensureDir(dirPath);
+    await fs.writeFile(fullPath, componentTemplate);
+    spinner.success({ text: `Component created at ${chalk.green(fullPath)}` });
+  } catch (error) {
+    spinner.error({ text: 'Failed to create component' });
+    console.error(chalk.red('Error: ') + error.message);
   }
+}
+
+// Create a page component
+async function addPage(pageName, options) {
+  console.log(banner);
+  createSection('Create Page');
   
-  if (features.features.includes('useEffect')) {
-    imports[0] = imports[0].replace('jsx', 'jsx, useEffect').replace(', useEffect, useEffect', ', useEffect');
-    hooks.push(`  useEffect(() => {
-    // Side effect code here
-    console.log('Component mounted');
-    
-    return () => {
-      // Cleanup code here
-      console.log('Component unmounted');
-    };
-  }, []);`);
+  // Validate page name
+  if (!pageName) {
+    const answers = await inquirer.prompt([
+      {
+        type: 'input',
+        name: 'pageName',
+        message: 'What is your page name?',
+        validate: input => /^[a-zA-Z0-9-_]+$/.test(input) 
+          ? true 
+          : 'Page name can only contain alphanumeric characters, hyphens and underscores'
+      }
+    ]);
+    pageName = answers.pageName;
   }
   
-  if (features.features.includes('cssModule')) {
-    imports.push(`import styles from './${componentName}.module.css';`);
-  }
+  // Format page name to be PascalCase for the component name
+  const pageComponentName = pageName
+    .split('-')
+    .map(part => part.charAt(0).toUpperCase() + part.slice(1))
+    .join('') + 'Page';
   
-  if (features.features.includes('propTypes')) {
-    imports.push(`import PropTypes from 'prop-types';`);
-    exports.push(`
-${componentName}.propTypes = {
-  title: PropTypes.string,
-  children: PropTypes.node
-};`);
-  }
+  // Determine file extension preference
+  let extension = options.typescript ? '.tsx' : options.jsx ? '.jsx' : null;
   
-  if (features.features.includes('defaultProps')) {
-    exports.push(`
-${componentName}.defaultProps = {
-  title: '${componentName} Title'
-};`);
+  if (!extension) {
+    const answers = await inquirer.prompt([
+      {
+        type: 'list',
+        name: 'extension',
+        message: 'Select file type:',
+        choices: [
+          { name: 'TypeScript (.tsx)', value: '.tsx' },
+          { name: 'JavaScript (.jsx)', value: '.jsx' }
+        ]
+      }
+    ]);
+    extension = answers.extension;
   }
   
-  // Build props
-  if (extension === '.tsx') {
-    propsInterface.push(`interface ${componentName}Props {
-  title?: string;
-  children?: React.ReactNode;
-}`);
-    props.push(`{ title, children }: ${componentName}Props`);
-  } else {
-    props.push(`{ title, children }`);
-  }
+  // Create page file path
+  const pagePath = options.path || 'src/pages';
   
-  // Build render content
-  const className = features.features.includes('cssModule') ? 'styles.component' : 'component';
-  const titleClass = features.features.includes('cssModule') ? 'styles.title' : 'title';
-  const contentClass = features.features.includes('cssModule') ? 'styles.content' : 'content';
-  
-  renders.push(`  return (
-    <div className="${className}">
-      {title && <h2 className="${titleClass}">{title}</h2>}
-      ${features.features.includes('useState') ? `<p>State value: {state}</p>
-      <button onClick={() => setState('updated state')}>Update State</button>` : ''}
-      <div className="${contentClass}">
-        {children}
-      </div>
-    </div>
-  );`);
+  // For index page, use the directory itself
+  const fileName = pageName === 'index' ? 'index' : pageName;
+  const fullPath = path.join(process.cwd(), pagePath, `${fileName}${extension}`);
+  const dirPath = path.dirname(fullPath);
   
-  // Assemble final component template
-  const componentTemplate = `${imports.join('\n')}
+  // Page template
+  const pageTemplate = extension === '.tsx' 
+    ? `import { jsx } from 'frontend-hamroun';
+import Layout from '../components/Layout';
 
-${propsInterface.join('\n')}
+interface ${pageComponentName}Props {
+  initialState?: any;
+}
 
-export default function ${componentName}(${props.join(', ')}) {
-${hooks.join('\n\n')}
-${renders.join('\n')}
-}${exports.join('')}
-`;
+const ${pageComponentName}: React.FC<${pageComponentName}Props> = ({ initialState }) => {
+  return (
+    <Layout title="${pageName.split('-').map(word => word.charAt(0).toUpperCase() + word.slice(1)).join(' ')}">
+      <div className="page">
+        <h1>${pageName.split('-').map(word => word.charAt(0).toUpperCase() + word.slice(1)).join(' ')}</h1>
+        <p>Welcome to this page!</p>
+      </div>
+    </Layout>
+  );
+};
 
-  // CSS Module template if selected
-  const cssTemplate = `.component {
-  border: 1px solid #eaeaea;
-  border-radius: 8px;
-  padding: 16px;
-  margin: 16px 0;
-  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
-}
+// Optional: Add data fetching for SSR support
+${pageComponentName}.getInitialData = async () => {
+  // You can fetch data for server-side rendering here
+  return {
+    // Your data here
+  };
+};
 
-.title {
-  font-size: 1.25rem;
-  margin-bottom: 12px;
-  color: #333;
-}
+export default ${pageComponentName};
+`
+    : `import { jsx } from 'frontend-hamroun';
+import Layout from '../components/Layout';
+
+const ${pageComponentName} = ({ initialState }) => {
+  return (
+    <Layout title="${pageName.split('-').map(word => word.charAt(0).toUpperCase() + word.slice(1)).join(' ')}">
+      <div className="page">
+        <h1>${pageName.split('-').map(word => word.charAt(0).toUpperCase() + word.slice(1)).join(' ')}</h1>
+        <p>Welcome to this page!</p>
+      </div>
+    </Layout>
+  );
+};
 
-.content {
-  font-size: 1rem;
-  line-height: 1.5;
-}
+// Optional: Add data fetching for SSR support
+${pageComponentName}.getInitialData = async () => {
+  // You can fetch data for server-side rendering here
+  return {
+    // Your data here
+  };
+};
+
+export default ${pageComponentName};
 `;
 
-  // Create the files
-  const spinner = ora({
-    text: `Creating ${componentName} component...`,
-    color: 'cyan'
-  }).start();
-  
+  // Create the file
+  const spinner = createSpinner(`Creating ${pageName} page...`).start();
   try {
-    // Create component file
     await fs.ensureDir(dirPath);
-    await fs.writeFile(fullPath, componentTemplate);
-    
-    // Create CSS module if selected
-    if (cssPath) {
-      await fs.writeFile(cssPath, cssTemplate);
-    }
-    
-    spinner.succeed(`Component created at ${chalk.green(fullPath)}`);
-    
-    // Show component usage example
-    console.log(boxen(
-      `${chalk.bold.green('Component created successfully!')}\n\n` +
-      `${chalk.bold('Import and use your component:')}\n\n` +
-      chalk.cyan(`import ${componentName} from './${path.relative(process.cwd(), fullPath).replace(/\\/g, '/').replace(/\.(jsx|tsx)$/, '')}';\n\n`) +
-      chalk.cyan(`<${componentName} title="My Title">
-  <p>Child content goes here</p>
-</${componentName}>`),
-      {
-        padding: 1,
-        margin: 1,
-        borderStyle: 'round',
-        borderColor: 'green'
-      }
-    ));
+    await fs.writeFile(fullPath, pageTemplate);
+    spinner.success({ text: `Page created at ${chalk.green(fullPath)}` });
   } catch (error) {
-    spinner.fail(`Failed to create component`);
-    console.error(chalk.red(`Error: ${error.message}`));
+    spinner.error({ text: 'Failed to create page' });
+    console.error(chalk.red('Error: ') + error.message);
   }
 }
 
-// Format help text for better readability
-function formatHelp(commandName, options) {
-  let help = `\n  ${chalk.bold.cyan('Usage:')} ${chalk.yellow(`frontend-hamroun ${commandName} [options]`)}\n\n`;
+// Add API route
+async function addApiRoute(routeName, options) {
+  console.log(banner);
+  createSection('Create API Route');
   
-  help += `  ${chalk.bold.cyan('Options:')}\n`;
-  options.forEach(opt => {
-    help += `    ${chalk.green(opt.flags.padEnd(20))} ${opt.description}\n`;
-  });
+  // Validate route name
+  if (!routeName) {
+    const answers = await inquirer.prompt([
+      {
+        type: 'input',
+        name: 'routeName',
+        message: 'What is your API route name?',
+        validate: input => /^[a-zA-Z0-9-_/[\]]+$/.test(input) 
+          ? true 
+          : 'Route name can only contain alphanumeric characters, hyphens, underscores, slashes, and square brackets for dynamic parameters ([id])'
+      }
+    ]);
+    routeName = answers.routeName;
+  }
   
-  help += `\n  ${chalk.bold.cyan('Examples:')}\n`;
-  help += `    ${chalk.yellow(`frontend-hamroun ${commandName} MyComponent`)}\n`;
-  help += `    ${chalk.yellow(`frontend-hamroun ${commandName} NavBar --typescript`)}\n`;
+  // Determine file extension preference
+  let extension = options.typescript ? '.ts' : '.js';
   
-  return help;
-}
-
-// Dashboard when no commands are specified
-function showDashboard() {
-  displayBanner();
-  
-  const commands = [
-    { name: 'create', description: 'Create a new project', command: 'frontend-hamroun create my-app' },
-    { name: 'add:component', description: 'Add a new UI component', command: 'frontend-hamroun add:component Button' },
-    { name: 'add:page', description: 'Create a new page', command: 'frontend-hamroun add:page home' },
-    { name: 'add:api', description: 'Create a new API endpoint', command: 'frontend-hamroun add:api users' },
-    { name: 'dev:tools', description: 'Show development tools', command: 'frontend-hamroun dev:tools' }
-  ];
-  
-  console.log(boxen(
-    `${chalk.bold.cyan('Welcome to Frontend Hamroun CLI!')}\n\n` +
-    `Select a command to get started or run ${chalk.yellow('frontend-hamroun <command> --help')} for more info.\n`,
-    {
-      padding: 1, 
-      margin: { top: 1, bottom: 1 },
-      borderStyle: 'round',
-      borderColor: 'cyan'
+  if (!options.typescript && !options.javascript) {
+    const answers = await inquirer.prompt([
+      {
+        type: 'list',
+        name: 'extension',
+        message: 'Select file type:',
+        choices: [
+          { name: 'TypeScript (.ts)', value: '.ts' },
+          { name: 'JavaScript (.js)', value: '.js' }
+        ]
+      }
+    ]);
+    extension = answers.extension;
+  }
+  
+  // Choose HTTP methods to implement
+  let methods = options.methods ? options.methods.split(',') : null;
+  
+  if (!methods) {
+    const answers = await inquirer.prompt([
+      {
+        type: 'checkbox',
+        name: 'methods',
+        message: 'Select HTTP methods to implement:',
+        choices: [
+          { name: 'GET', value: 'get', checked: true },
+          { name: 'POST', value: 'post' },
+          { name: 'PUT', value: 'put' },
+          { name: 'DELETE', value: 'delete' },
+          { name: 'PATCH', value: 'patch' }
+        ],
+        validate: input => input.length > 0 ? true : 'Please select at least one method'
+      }
+    ]);
+    methods = answers.methods;
+  }
+  
+  // Create API route path
+  const routePath = options.path || 'api';
+  
+  // Determine filename from route name
+  // If last segment includes parameters, handle specially 
+  const segments = routeName.split('/').filter(Boolean);
+  let directory = '';
+  let filename = 'index';
+  
+  if (segments.length > 0) {
+    if (segments.length === 1) {
+      filename = segments[0];
+    } else {
+      directory = segments.slice(0, -1).join('/');
+      filename = segments[segments.length - 1];
     }
-  ));
+  }
+  
+  const fullPath = path.join(process.cwd(), routePath, directory, `${filename}${extension}`);
+  const dirPath = path.dirname(fullPath);
   
-  console.log(`${chalk.bold.cyan('Available Commands:')}\n`);
-  commands.forEach((cmd, i) => {
-    console.log(`  ${chalk.green((i+1) + '.')} ${chalk.bold(cmd.name.padEnd(15))} ${chalk.dim(cmd.description)}`);
-    console.log(`     ${chalk.yellow(cmd.command)}\n`);
+  // API route template
+  let apiTemplate = extension === '.ts' 
+    ? `import { Request, Response } from 'express';\n\n`
+    : '';
+  
+  // Add method handlers
+  methods.forEach(method => {
+    if (method === 'delete' && extension === '.js') {
+      // In JS, "delete" is a reserved keyword, so we name it "delete_"
+      apiTemplate += `export const delete_ = (req, res) => {
+  res.json({
+    message: 'DELETE ${routeName} endpoint',
+    timestamp: new Date().toISOString()
+  });
+};\n\n`;
+    } else {
+      apiTemplate += extension === '.ts'
+        ? `export const ${method} = (req: Request, res: Response) => {
+  res.json({
+    message: '${method.toUpperCase()} ${routeName} endpoint',
+    timestamp: new Date().toISOString()
+  });
+};\n\n`
+        : `export const ${method} = (req, res) => {
+  res.json({
+    message: '${method.toUpperCase()} ${routeName} endpoint',
+    timestamp: new Date().toISOString()
+  });
+};\n\n`;
+    }
   });
   
-  console.log(boxen(
-    `${chalk.bold('Quick Start:')} ${chalk.yellow('frontend-hamroun create my-app')}\n` +
-    `${chalk.dim('More info:')} ${terminalLink('Documentation', 'https://github.com/hamroun/frontend-hamroun')}`,
-    {
-      padding: 0.5,
-      margin: { top: 1 },
-      borderStyle: 'round',
-      borderColor: 'blue'
+  // Create the file
+  const spinner = createSpinner(`Creating ${routeName} API route...`).start();
+  try {
+    await fs.ensureDir(dirPath);
+    await fs.writeFile(fullPath, apiTemplate);
+    spinner.success({ text: `API route created at ${chalk.green(fullPath)}` });
+    
+    createSection('API Route Information');
+    console.log(`${chalk.bold.green('✓')} Your API route is accessible at:`);
+    console.log(`  ${chalk.cyan(`/api/${routeName}`)}\n`);
+    
+    // For dynamic routes, provide example
+    if (routeName.includes('[') && routeName.includes(']')) {
+      const exampleRoute = routeName.replace(/\[([^\]]+)\]/g, 'value');
+      console.log(`${chalk.bold.yellow('ℹ')} For dynamic parameters, access using:`);
+      console.log(`  ${chalk.cyan(`/api/${exampleRoute}`)}\n`);
+      console.log(`${chalk.bold.yellow('ℹ')} Access parameters in your handler with:`);
+      console.log(`  ${chalk.cyan('req.params.paramName')}\n`);
     }
-  ));
+  } catch (error) {
+    spinner.error({ text: 'Failed to create API route' });
+    console.error(chalk.red('Error: ') + error.message);
+  }
 }
 
-// Register commands with improved descriptions
+// Display dev tools and tips
+function showDevTools() {
+  console.log(banner);
+  createSection('Development Tools');
+  
+  console.log(chalk.bold('Available Commands:') + '\n');
+  console.log(`${chalk.green('•')} ${chalk.bold('npm run dev')} - Start development server`);
+  console.log(`${chalk.green('•')} ${chalk.bold('npm run build')} - Create production build`);
+  console.log(`${chalk.green('•')} ${chalk.bold('npm start')} - Run production server\n`);
+  
+  console.log(chalk.bold('Useful Tips:') + '\n');
+  console.log(`${chalk.blue('1.')} Use ${chalk.cyan('frontend-hamroun create')} to scaffold a new project`);
+  console.log(`${chalk.blue('2.')} Add components with ${chalk.cyan('frontend-hamroun add:component')}`);
+  console.log(`${chalk.blue('3.')} Create pages with ${chalk.cyan('frontend-hamroun add:page')}`);
+  console.log(`${chalk.blue('4.')} Add API routes with ${chalk.cyan('frontend-hamroun add:api')}\n`);
+  
+  console.log(chalk.bold('Project Structure:') + '\n');
+  console.log(`${chalk.yellow('src/')}`);
+  console.log(`  ${chalk.yellow('├── components/')} - Reusable UI components`);
+  console.log(`  ${chalk.yellow('├── pages/')} - File-based route components`);
+  console.log(`  ${chalk.yellow('├── styles/')} - CSS and styling files`);
+  console.log(`  ${chalk.yellow('└── utils/')} - Helper functions and utilities`);
+  console.log(`${chalk.yellow('api/')} - API route handlers`);
+  console.log(`${chalk.yellow('public/')} - Static assets\n`);
+}
+
+// Register commands
 program
   .command('create [name]')
   .description('Create a new Frontend Hamroun project')
@@ -738,10 +582,7 @@ program
   .option('-p, --path <path>', 'Path where the page should be created')
   .option('-ts, --typescript', 'Use TypeScript')
   .option('-jsx, --jsx', 'Use JSX')
-  .action((pageName, options) => {
-    // We'll keep the existing implementation for now
-    console.log("The add:page command has been improved in your version.");
-  });
+  .action(addPage);
 
 program
   .command('add:api [name]')
@@ -750,22 +591,17 @@ program
   .option('-ts, --typescript', 'Use TypeScript')
   .option('-js, --javascript', 'Use JavaScript')
   .option('-m, --methods <methods>', 'HTTP methods to implement (comma-separated: get,post,put,delete,patch)')
-  .action((routeName, options) => {
-    // We'll keep the existing implementation for now
-    console.log("The add:api command has been improved in your version.");
-  });
+  .action(addApiRoute);
 
 program
   .command('dev:tools')
   .description('Show development tools and tips')
-  .action(() => {
-    // We'll keep the existing implementation for now
-    console.log("The dev:tools command has been improved in your version.");
-  });
+  .action(showDevTools);
 
 // Default command when no arguments
 if (process.argv.length <= 2) {
-  showDashboard();
-} else {
-  program.parse(process.argv);
-}
+  console.log(banner);
+  program.help();
+}
+
+program.parse();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "frontend-hamroun",
-  "version": "1.2.40",
+  "version": "1.2.42",
   "description": "A lightweight full-stack JavaScript framework",
   "type": "module",
   "main": "./dist/index.js",