frontend-hamroun 1.2.28 → 1.2.30

package/bin/cli.js

@@ -2,668 +2,592 @@
 
 import { Command } from 'commander';
 import inquirer from 'inquirer';
-import fs from 'fs-extra';
-import path from 'path';
-import { fileURLToPath } from 'url';
 import chalk from 'chalk';
 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';
 
+// Convert to ESM-friendly __dirname equivalent
 const __filename = fileURLToPath(import.meta.url);
 const __dirname = path.dirname(__filename);
+const execAsync = promisify(exec);
 
-// Component templates
-const FUNCTION_COMPONENT_TEMPLATE = (name) => `import { useState, useEffect } from 'frontend-hamroun';
+// CLI instance
+const program = new Command();
 
-export function ${name}(props) {
-  // State hooks
-  const [state, setState] = useState(null);
+// 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('╚══════════════════════════════════════════════╝')}
+`;
 
-  // Effect hooks
-  useEffect(() => {
-    // Component mounted
-    return () => {
-      // Component will unmount
-    };
-  }, []);
+// Version and description
+program
+  .name('frontend-hamroun')
+  .description('CLI for Frontend Hamroun - A lightweight full-stack JavaScript framework')
+  .version(JSON.parse(fs.readFileSync(path.join(__dirname, '..', 'package.json'), 'utf8')).version);
 
-  return (
-    <div className="${name.toLowerCase()}">
-      <h2>${name} Component</h2>
-      {/* Your JSX here */}
-    </div>
-  );
-}
-`;
+// Helper for creating visually consistent sections
+const createSection = (title) => {
+  console.log('\n' + chalk.bold.cyan(`◆ ${title}`));
+  console.log(chalk.cyan('─'.repeat(50)) + '\n');
+};
 
-const CSS_TEMPLATE = (name) => `.${name.toLowerCase()} {
-  display: flex;
-  flex-direction: column;
-  padding: 1rem;
-  margin: 0.5rem;
-  border-radius: 4px;
-  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+// Helper for checking dependencies
+async function checkDependencies() {
+  const spinner = createSpinner('Checking dependencies...').start();
+  try {
+    await execAsync('npm --version');
+    spinner.success({ text: 'Dependencies verified' });
+    return true;
+  } catch (error) {
+    spinner.error({ text: 'Missing required dependencies' });
+    console.log(chalk.red('Error: Node.js and npm are required to use this tool.'));
+    return false;
+  }
 }
-`;
 
-const TEST_TEMPLATE = (name) => `import { render, screen } from '@testing-library/frontend-hamroun';
-import { ${name} } from './${name}';
+// Choose template interactively
+async function chooseTemplate() {
+  const templatesPath = path.join(__dirname, '..', 'templates');
+  const templates = fs.readdirSync(templatesPath).filter(file =>
+    fs.statSync(path.join(templatesPath, file)).isDirectory()
+  );
 
-describe('${name} Component', () => {
-  test('renders correctly', () => {
-    render(<${name} />);
-    const element = screen.getByText('${name} Component');
-    expect(element).toBeInTheDocument();
+  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';
+    }
+    return {
+      name: `${chalk.bold(template)} - ${chalk.dim(description)}`,
+      value: template
+    };
   });
-});
-`;
-
-// Dockerfile templates
-const DOCKERFILE_TEMPLATE = `# Stage 1: Build the application
-FROM node:18-alpine as build
-
-# Set working directory
-WORKDIR /app
-
-# Copy package files
-COPY package.json package-lock.json ./
-
-# Install dependencies
-RUN npm ci
-
-# Copy source files
-COPY . .
 
-# Build the application
-RUN npm run build
-
-# Stage 2: Serve the application
-FROM nginx:alpine
-
-# Copy the build output from the previous stage
-COPY --from=build /app/dist /usr/share/nginx/html
-
-# Expose port 80
-EXPOSE 80
-
-# Start nginx
-CMD ["nginx", "-g", "daemon off;"]
-`;
-
-const SSR_DOCKERFILE_TEMPLATE = `# Stage 1: Build the application
-FROM node:18-alpine as build
-
-# Set working directory
-WORKDIR /app
-
-# Copy package files
-COPY package.json package-lock.json ./
-
-# Install dependencies
-RUN npm ci
-
-# Copy source files
-COPY . .
-
-# Build the application
-RUN npm run build
-
-# Stage 2: Run the server
-FROM node:18-alpine
-
-WORKDIR /app
+  const answers = await inquirer.prompt([
+    {
+      type: 'list',
+      name: 'template',
+      message: chalk.green('Select a project template:'),
+      choices: templateOptions,
+      loop: false
+    }
+  ]);
 
-# Copy package files and install production dependencies only
-COPY package.json package-lock.json ./
-RUN npm ci --production
+  return answers.template;
+}
 
-# Copy build artifacts
-COPY --from=build /app/dist ./dist
-COPY --from=build /app/server ./server
+// Create a new project
+async function createProject(projectName, options) {
+  console.log(banner);
+  createSection('Project Setup');
+
+  if (!projectName) {
+    const answers = await inquirer.prompt([
+      {
+        type: 'input',
+        name: 'projectName',
+        message: chalk.green('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'
+      }
+    ]);
+    projectName = answers.projectName;
+  }
 
-# Expose port 3000
-EXPOSE 3000
+  if (!await checkDependencies()) return;
 
-# Start the server
-CMD ["node", "server/index.js"]
-`;
+  let template = options.template || await chooseTemplate();
 
-async function init() {
-  const program = new Command();
-
-  program
-    .name('frontend-hamroun')
-    .description('CLI for Frontend Hamroun framework')
-    .version('1.0.0');
-
-  // Create new project
-  program
-    .command('create')
-    .description('Create a new Frontend Hamroun application')
-    .argument('[name]', 'Project name')
-    .action(async (name) => {
-      const projectName = name || await askProjectName();
-      await createProject(projectName);
-    });
-
-  // Generate component
-  program
-    .command('generate')
-    .alias('g')
-    .description('Generate a new component')
-    .argument('<name>', 'Component name')
-    .option('-d, --directory <directory>', 'Target directory', './src/components')
-    .action(async (name, options) => {
-      await generateComponent(name, options.directory);
-    });
-
-  // Add Dockerfile
-  program
-    .command('docker')
-    .description('Add Dockerfile to project')
-    .option('-s, --ssr', 'Use SSR-compatible Dockerfile')
-    .action(async (options) => {
-      await addDockerfile(options.ssr);
-    });
-
-  // Add generate API route command
-  program
-    .command('api')
-    .description('Generate a new API route')
-    .argument('<name>', 'API route name (e.g., users or users/[id])')
-    .option('-d, --directory <directory>', 'Target directory', './api')
-    .action(async (name, options) => {
-      await generateApiRoute(name, options.directory);
-    });
-
-  // Interactive mode if no command provided
-  if (process.argv.length <= 2) {
-    await interactiveMode();
-  } else {
-    program.parse();
-  }
-}
+  const targetDir = path.resolve(projectName);
+  const templateDir = path.join(__dirname, '..', 'templates', template);
 
-async function interactiveMode() {
-  const { action } = await inquirer.prompt([{
-    type: 'list',
-    name: 'action',
-    message: 'What would you like to do?',
-    choices: [
-      { name: 'Create a new project', value: 'create' },
-      { name: 'Generate a component', value: 'generate' },
-      { name: 'Generate an API route', value: 'api' },
-      { name: 'Add Dockerfile to project', value: 'docker' }
-    ]
-  }]);
-
-  if (action === 'create') {
-    const projectName = await askProjectName();
-    await createProject(projectName);
-  } else if (action === 'generate') {
-    const { name } = await inquirer.prompt([{
-      type: 'input',
-      name: 'name',
-      message: 'Component name:',
-      validate: (input) => input ? true : 'Component name is required'
-    }]);
-    
-    const { directory } = await inquirer.prompt([{
-      type: 'input',
-      name: 'directory',
-      message: 'Target directory:',
-      default: './src/components'
-    }]);
-    
-    await generateComponent(name, directory);
-  } else if (action === 'api') {
-    const { name } = await inquirer.prompt([{
-      type: 'input',
-      name: 'name',
-      message: 'API route name:',
-      validate: (input) => input ? true : 'API route name is required'
-    }]);
-    
-    const { directory } = await inquirer.prompt([{
-      type: 'input',
-      name: 'directory',
-      message: 'Target directory:',
-      default: './api'
-    }]);
-    
-    await generateApiRoute(name, directory);
-  } else if (action === 'docker') {
-    const { isSSR } = await inquirer.prompt([{
-      type: 'confirm',
-      name: 'isSSR',
-      message: 'Is this a server-side rendered app?',
-      default: false
-    }]);
-    
-    await addDockerfile(isSSR);
+  if (fs.existsSync(targetDir)) {
+    const answers = await inquirer.prompt([
+      {
+        type: 'confirm',
+        name: 'overwrite',
+        message: chalk.yellow(`Directory ${projectName} already exists. Overwrite?`),
+        default: false
+      }
+    ]);
+    if (!answers.overwrite) {
+      console.log(chalk.red('✖ Operation cancelled'));
+      return;
+    }
   }
-}
-
-async function askProjectName() {
-  const { projectName } = await inquirer.prompt([{
-    type: 'input',
-    name: 'projectName',
-    message: 'What is your project named?',
-    default: 'my-frontend-app'
-  }]);
-  return projectName;
-}
 
-async function askProjectType() {
-  const { template } = await inquirer.prompt([{
-    type: 'list',
-    name: 'template',
-    message: 'Select project type:',
-    choices: [
-      { name: 'Client Side App', value: 'basic-app' },
-      { name: 'Server Side Rendered App', value: 'ssr-template' },
-      { name: 'Full Stack App', value: 'fullstack-app' }
-    ]
-  }]);
-  return template;
-}
-
-async function createProject(projectName) {
   const spinner = createSpinner('Creating project...').start();
-
   try {
-    const template = await askProjectType();
-    const templateDir = path.join(__dirname, '..', 'templates', template);
-    const targetDir = path.join(process.cwd(), projectName);
-
-    // Create project directory
     await fs.ensureDir(targetDir);
+    await fs.copy(templateDir, targetDir, { overwrite: true });
 
-    // Copy template files
-    await fs.copy(templateDir, targetDir);
-
-    // Update package.json
-    const pkgPath = path.join(targetDir, 'package.json');
-    const pkg = await fs.readJson(pkgPath);
-    pkg.name = projectName;
-    await fs.writeJson(pkgPath, pkg, { spaces: 2 });
-
-    // Automatically add Dockerfile
-    const isSSR = template === 'ssr-template';
-    const dockerContent = isSSR ? SSR_DOCKERFILE_TEMPLATE : DOCKERFILE_TEMPLATE;
-    await fs.writeFile(path.join(targetDir, 'Dockerfile'), dockerContent);
-
-    spinner.success({ text: `Project ${chalk.green(projectName)} created successfully with Dockerfile!` });
+    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 });
+    }
 
-    // Show next steps
-    console.log('\nNext steps:');
-    console.log(chalk.cyan(`  cd ${projectName}`));
-    console.log(chalk.cyan('  npm install'));
-    console.log(chalk.cyan('  npm run dev'));
-    console.log(chalk.yellow('\nTo build Docker image:'));
-    console.log(chalk.cyan('  docker build -t my-app .'));
-    console.log(chalk.cyan('  docker run -p 3000:' + (isSSR ? '3000' : '80') + ' my-app'));
+    spinner.success({ text: `Project created successfully at ${chalk.green(targetDir)}` });
 
+    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) {
     spinner.error({ text: 'Failed to create project' });
-    console.error(chalk.red(error));
-    process.exit(1);
+    console.error(chalk.red('Error: ') + error.message);
   }
 }
 
-async function generateComponent(name, directory) {
-  const spinner = createSpinner(`Generating ${name} component...`).start();
-
-  try {
-    const targetDir = path.join(process.cwd(), directory, name);
-    
-    // Create component directory
-    await fs.ensureDir(targetDir);
-    
-    // Create component files
-    await fs.writeFile(
-      path.join(targetDir, `${name}.jsx`),
-      FUNCTION_COMPONENT_TEMPLATE(name)
-    );
-    
-    await fs.writeFile(
-      path.join(targetDir, `${name}.css`),
-      CSS_TEMPLATE(name)
-    );
-    
-    await fs.writeFile(
-      path.join(targetDir, `${name}.test.jsx`),
-      TEST_TEMPLATE(name)
-    );
-    
-    await fs.writeFile(
-      path.join(targetDir, 'index.js'),
-      `export { ${name} } from './${name}';\n`
-    );
-    
-    spinner.success({ text: `Component ${chalk.green(name)} generated successfully!` });
-    
-    console.log('\nFiles created:');
-    console.log(chalk.cyan(`  ${path.join(directory, name, `${name}.jsx`)}`));
-    console.log(chalk.cyan(`  ${path.join(directory, name, `${name}.css`)}`));
-    console.log(chalk.cyan(`  ${path.join(directory, name, `${name}.test.jsx`)}`));
-    console.log(chalk.cyan(`  ${path.join(directory, name, 'index.js')}`));
-    
-  } catch (error) {
-    spinner.error({ text: 'Failed to generate component' });
-    console.error(chalk.red(error));
-    process.exit(1);
+// Add component to existing project
+async function addComponent(componentName, options) {
+  console.log(banner);
+  createSection('Create Component');
+  
+  // Validate component name
+  if (!componentName) {
+    const answers = await inquirer.prompt([
+      {
+        type: 'input',
+        name: 'componentName',
+        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'
+      }
+    ]);
+    componentName = answers.componentName;
   }
-}
-
-async function generateApiRoute(name, directory) {
-  const spinner = createSpinner(`Generating ${name} API route...`).start();
-
-  try {
-    const routePath = name.includes('/') ? name : name;
-    const routeDir = path.dirname(path.join(process.cwd(), directory, routePath));
-    const routeFileName = path.basename(routePath);
-    const targetPath = path.join(routeDir, `${routeFileName}.ts`);
-    
-    // Create directory structure
-    await fs.ensureDir(routeDir);
-    
-    // Create API route file
-    const isDynamic = routeFileName.startsWith('[') && routeFileName.endsWith(']');
-    const template = isDynamic ? DYNAMIC_API_ROUTE_TEMPLATE : API_ROUTE_TEMPLATE;
-    
-    await fs.writeFile(targetPath, template);
-    
-    // Check if server.ts file exists, if not create it
-    const serverFilePath = path.join(process.cwd(), 'server.ts');
-    if (!await fs.pathExists(serverFilePath)) {
-      await fs.writeFile(serverFilePath, SERVER_TEMPLATE);
-      console.log(chalk.green('\nCreated server.ts file with Express setup'));
-      
-      // Create tsconfig.server.json if it doesn't exist
-      const tsconfigPath = path.join(process.cwd(), 'tsconfig.server.json');
-      if (!await fs.pathExists(tsconfigPath)) {
-        await fs.writeFile(tsconfigPath, TSCONFIG_SERVER_TEMPLATE);
-        console.log(chalk.green('Created tsconfig.server.json for server-side TypeScript'));
+  
+  // Determine file extension preference
+  let extension = options.typescript ? '.tsx' : options.jsx ? '.jsx' : null;
+  
+  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' }
+        ]
       }
-      
-      // Check and update package.json to add server dependencies
-      try {
-        const pkgPath = path.join(process.cwd(), 'package.json');
-        if (await fs.pathExists(pkgPath)) {
-          const pkg = await fs.readJson(pkgPath);
-          
-          // Check if we need to add server dependencies
-          let needsUpdate = false;
-          const serverDeps = {
-            "express": "^4.18.2",
-            "cors": "^2.8.5",
-            "mongodb": "^5.7.0",     // Add MongoDB support
-            "jsonwebtoken": "^9.0.2", // Add JWT support for auth
-            "bcryptjs": "^2.4.3"     // Add password hashing support
-          };
-          
-          const devDeps = {
-            "@types/express": "^4.17.17",
-            "@types/cors": "^2.8.13",
-            "@types/mongodb": "^4.0.7",
-            "@types/jsonwebtoken": "^9.0.3",
-            "@types/bcryptjs": "^2.4.4"
-          };
-          
-          // Add dependencies if needed
-          pkg.dependencies = pkg.dependencies || {};
-          for (const [dep, version] of Object.entries(serverDeps)) {
-            if (!pkg.dependencies[dep]) {
-              pkg.dependencies[dep] = version;
-              needsUpdate = true;
-            }
-          }
-          
-          // Add dev dependencies if needed
-          pkg.devDependencies = pkg.devDependencies || {};
-          for (const [dep, version] of Object.entries(devDeps)) {
-            if (!pkg.devDependencies[dep]) {
-              pkg.devDependencies[dep] = version;
-              needsUpdate = true;
-            }
-          }
-          
-          // Add start script if it doesn't exist
-          pkg.scripts = pkg.scripts || {};
-          if (!pkg.scripts.start) {
-            pkg.scripts.start = "node server.js";
-            needsUpdate = true;
-          }
-          
-          // Save changes if needed
-          if (needsUpdate) {
-            await fs.writeJson(pkgPath, pkg, { spaces: 2 });
-            console.log(chalk.green('Updated package.json with server dependencies'));
-          }
-        } 
-      } catch (error) {
-        console.warn(chalk.yellow('Could not update package.json:', error.message));
+    ]);
+    extension = answers.extension;
+  }
+  
+  // 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'
       }
-    }
-    
-    spinner.success({ text: `API route ${chalk.green(name)} generated successfully!` });
-    
-    console.log('\nFile created:');
-    console.log(chalk.cyan(`  ${path.join(directory, routePath)}.ts`));
-    
-  } catch (error) {
-    spinner.error({ text: 'Failed to generate API route' });
-    console.error(chalk.red(error));
-    process.exit(1);
+    ]);
+    componentPath = answers.path;
   }
+  
+  // Create component content based on type
+  const fullPath = path.join(process.cwd(), componentPath, `${componentName}${extension}`);
+  const dirPath = path.dirname(fullPath);
+  
+  // Sample template
+  const componentTemplate = extension === '.tsx' 
+    ? `import { jsx } from 'frontend-hamroun';
+
+interface ${componentName}Props {
+  title?: string;
+  children?: any;
 }
 
-// Add a server template for Express
-const SERVER_TEMPLATE = `// Import directly from frontend-hamroun
-// The server module will be dynamically loaded in Node.js environment
-import { server } from 'frontend-hamroun';
+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>
+  );
+}
+`;
 
-async function startServer() {
+  // Create the file
+  const spinner = createSpinner(`Creating ${componentName} component...`).start();
   try {
-    // Dynamically import server components
-    const { Server, Database, AuthService, renderComponent } = await server.getServer();
-    
-    // Create and configure the server
-    const app = new Server({
-      port: process.env.PORT ? parseInt(process.env.PORT) : 3000,
-      apiDir: './api',
-      pagesDir: './src/pages', // For SSR pages
-      staticDir: './public',
-      
-      // Enable CORS
-      enableCors: true,
-      corsOptions: {
-        origin: process.env.CORS_ORIGIN || '*',
-        methods: ['GET', 'POST', 'PUT', 'DELETE', 'PATCH'],
-        allowedHeaders: ['Content-Type', 'Authorization']
-      }
-    });
-    
-    // Connect to database if configured
-    if (app.getDatabase()) {
-      await app.getDatabase().connect();
-      console.log('Connected to database');
-    }
-    
-    // Start the server
-    await app.start();
-    
-    console.log('Server running at http://localhost:' + 
-      (process.env.PORT || 3000));
-      
-    // Handle graceful shutdown
-    process.on('SIGINT', async () => {
-      console.log('Shutting down server...');
-      if (app.getDatabase()) {
-        await app.getDatabase().disconnect();
-        console.log('Database connection closed');
-      }
-      await app.stop();
-      console.log('Server stopped');
-      process.exit(0);
-    });
+    await fs.ensureDir(dirPath);
+    await fs.writeFile(fullPath, componentTemplate);
+    spinner.success({ text: `Component created at ${chalk.green(fullPath)}` });
   } catch (error) {
-    console.error('Failed to start server:', error);
-    process.exit(1);
+    spinner.error({ text: 'Failed to create component' });
+    console.error(chalk.red('Error: ') + error.message);
   }
 }
 
-startServer();
-`;
-
-async function addDockerfile(isSSR) {
-  const spinner = createSpinner('Adding Dockerfile...').start();
+// Create a page component
+async function addPage(pageName, options) {
+  console.log(banner);
+  createSection('Create Page');
   
-  try {
-    const dockerContent = isSSR ? SSR_DOCKERFILE_TEMPLATE : DOCKERFILE_TEMPLATE;
-    const targetPath = path.join(process.cwd(), 'Dockerfile');
-    
-    // Check if Dockerfile already exists
-    if (await fs.pathExists(targetPath)) {
-      spinner.stop();
-      const { overwrite } = await inquirer.prompt([{
-        type: 'confirm',
-        name: 'overwrite',
-        message: 'Dockerfile already exists. Overwrite?',
-        default: false
-      }]);
-      
-      if (!overwrite) {
-        console.log(chalk.yellow('Operation cancelled.'));
-        return;
+  // 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'
       }
-      
-      spinner.start();
-    }
-    
-    // Write Dockerfile
-    await fs.writeFile(targetPath, dockerContent);
-    
-    spinner.success({ text: 'Dockerfile added successfully!' });
-    
-    console.log('\nTo build and run Docker image:');
-    console.log(chalk.cyan('  docker build -t my-app .'));
-    console.log(chalk.cyan('  docker run -p 3000:' + (isSSR ? '3000' : '80') + ' my-app'));
-    
-  } catch (error) {
-    spinner.error({ text: 'Failed to add Dockerfile' });
-    console.error(chalk.red(error));
-    process.exit(1);
+    ]);
+    pageName = answers.pageName;
   }
-}
+  
+  // 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';
+  
+  // Determine file extension preference
+  let extension = options.typescript ? '.tsx' : options.jsx ? '.jsx' : null;
+  
+  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;
+  }
+  
+  // Create page file path
+  const pagePath = options.path || 'src/pages';
+  
+  // 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);
+  
+  // Page template
+  const pageTemplate = extension === '.tsx' 
+    ? `import { jsx } from 'frontend-hamroun';
+import Layout from '../components/Layout';
 
-// Add API route templates
-const API_ROUTE_TEMPLATE = `import { Request, Response } from 'express';
+interface ${pageComponentName}Props {
+  initialState?: any;
+}
 
-export const get = (req: Request, res: Response) => {
-  res.json({
-    message: 'This is a GET endpoint',
-    query: req.query,
-    timestamp: new Date().toISOString()
-  });
+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>
+  );
 };
 
-export const post = (req: Request, res: Response) => {
-  res.json({
-    message: 'This is a POST endpoint',
-    body: req.body,
-    timestamp: new Date().toISOString()
-  });
+// Optional: Add data fetching for SSR support
+${pageComponentName}.getInitialData = async () => {
+  // You can fetch data for server-side rendering here
+  return {
+    // Your data here
+  };
 };
 
-export const put = (req: Request, res: Response) => {
-  res.json({
-    message: 'This is a PUT endpoint',
-    body: req.body,
-    timestamp: new Date().toISOString()
-  });
+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>
+  );
 };
 
-export const delete_ = (req: Request, res: Response) => {
-  res.json({
-    message: 'This is a DELETE endpoint',
-    timestamp: new Date().toISOString()
-  });
+// Optional: Add data fetching for SSR support
+${pageComponentName}.getInitialData = async () => {
+  // You can fetch data for server-side rendering here
+  return {
+    // Your data here
+  };
 };
 
-// You can add middleware that will be applied to all methods
-export const middleware = [
-  // Example middleware
-  (req: Request, res: Response, next: Function) => {
-    console.log(\`\${req.method} \${req.url} - \${new Date().toISOString()}\`);
-    next();
-  }
-];
+export default ${pageComponentName};
 `;
 
-const DYNAMIC_API_ROUTE_TEMPLATE = `import { Request, Response } from 'express';
+  // Create the file
+  const spinner = createSpinner(`Creating ${pageName} page...`).start();
+  try {
+    await fs.ensureDir(dirPath);
+    await fs.writeFile(fullPath, pageTemplate);
+    spinner.success({ text: `Page created at ${chalk.green(fullPath)}` });
+  } catch (error) {
+    spinner.error({ text: 'Failed to create page' });
+    console.error(chalk.red('Error: ') + error.message);
+  }
+}
 
-export const get = (req: Request, res: Response) => {
+// Add API route
+async function addApiRoute(routeName, options) {
+  console.log(banner);
+  createSection('Create API Route');
+  
+  // 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;
+  }
+  
+  // Determine file extension preference
+  let extension = options.typescript ? '.ts' : '.js';
+  
+  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);
+  
+  // 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: 'This is a dynamic route GET endpoint',
-    params: req.params,
-    query: req.query,
+    message: 'DELETE ${routeName} endpoint',
     timestamp: new Date().toISOString()
   });
-};
-
-export const post = (req: Request, res: Response) => {
+};\n\n`;
+    } else {
+      apiTemplate += extension === '.ts'
+        ? `export const ${method} = (req: Request, res: Response) => {
   res.json({
-    message: 'This is a dynamic route POST endpoint',
-    params: req.params,
-    body: req.body,
+    message: '${method.toUpperCase()} ${routeName} endpoint',
     timestamp: new Date().toISOString()
   });
-};
-
-export const put = (req: Request, res: Response) => {
+};\n\n`
+        : `export const ${method} = (req, res) => {
   res.json({
-    message: 'This is a dynamic route PUT endpoint',
-    params: req.params,
-    body: req.body,
+    message: '${method.toUpperCase()} ${routeName} endpoint',
     timestamp: new Date().toISOString()
   });
-};
-
-export const delete_ = (req: Request, res: Response) => {
-  res.json({
-    message: 'This is a dynamic route DELETE endpoint',
-    params: req.params,
-    timestamp: new Date().toISOString()
+};\n\n`;
+    }
   });
-};
-
-// You can add middleware that will be applied to all methods
-export const middleware = [
-  // Example middleware
-  (req: Request, res: Response, next: Function) => {
-    console.log(\`\${req.method} \${req.url} - \${new Date().toISOString()}\`);
-    next();
+  
+  // 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);
   }
-];
-`;
+}
+
+// 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')
+  .option('-t, --template <template>', 'Specify template (basic-app, ssr-template, fullstack-app)')
+  .action(createProject);
+
+program
+  .command('add:component [name]')
+  .description('Create a new component')
+  .option('-p, --path <path>', 'Path where the component should be created')
+  .option('-ts, --typescript', 'Use TypeScript')
+  .option('-jsx, --jsx', 'Use JSX')
+  .action(addComponent);
+
+program
+  .command('add:page [name]')
+  .description('Create a new page')
+  .option('-p, --path <path>', 'Path where the page should be created')
+  .option('-ts, --typescript', 'Use TypeScript')
+  .option('-jsx, --jsx', 'Use JSX')
+  .action(addPage);
+
+program
+  .command('add:api [name]')
+  .description('Create a new API route')
+  .option('-p, --path <path>', 'Path where the API route should be created')
+  .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(addApiRoute);
+
+program
+  .command('dev:tools')
+  .description('Show development tools and tips')
+  .action(showDevTools);
+
+// Default command when no arguments
+if (process.argv.length <= 2) {
+  console.log(banner);
+  program.help();
+}
 
-// Add tsconfig.server.json template
-const TSCONFIG_SERVER_TEMPLATE = `{
-  "compilerOptions": {
-    "target": "ES2020",
-    "module": "NodeNext",
-    "moduleResolution": "NodeNext",
-    "esModuleInterop": true,
-    "outDir": "./dist",
-    "declaration": true,
-    "sourceMap": true,
-    "noEmit": false,
-    "strict": true,
-    "skipLibCheck": true
-  },
-  "include": ["server.ts", "api/**/*.ts"],
-  "exclude": ["node_modules", "dist", "**/*.test.ts"]
-}`;
-
-init().catch(console.error);
+program.parse();

package/package.json

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