frontend-hamroun 1.2.1 → 1.2.3

package/scripts/build-cli.js

@@ -1,81 +1,493 @@
 import fs from 'fs';
 import path from 'path';
 import { fileURLToPath } from 'url';
-import { exec } from 'child_process';
+import { execSync } from 'child_process';
 
 const __filename = fileURLToPath(import.meta.url);
 const __dirname = path.dirname(__filename);
 const rootDir = path.resolve(__dirname, '..');
-const cliDistDir = path.resolve(rootDir, 'dist/cli');
+const binDir = path.resolve(rootDir, 'bin');
 
-// Ensure CLI dist directory exists
-if (!fs.existsSync(cliDistDir)) {
-  fs.mkdirSync(cliDistDir, { recursive: true });
+// Ensure bin directory exists
+if (!fs.existsSync(binDir)) {
+  fs.mkdirSync(binDir, { recursive: true });
 }
 
-// Create CLI index.js in dist
-const cliIndexPath = path.resolve(cliDistDir, 'index.js');
-fs.writeFileSync(cliIndexPath, `#!/usr/bin/env node
+// Create CLI entrypoint using ES modules
+const cliContent = `#!/usr/bin/env node
 
-import { fileURLToPath } from 'url';
+import fs from 'fs';
 import path from 'path';
-import { createRequire } from 'module';
+import { fileURLToPath } from 'url';
+import { execSync } from 'child_process';
 
 const __filename = fileURLToPath(import.meta.url);
 const __dirname = path.dirname(__filename);
-const require = createRequire(import.meta.url);
 
-// Re-export the CLI from the compiled TypeScript
-import('../cli/index.js').catch(err => {
-  console.error('Failed to load CLI:', err);
-  process.exit(1);
-});
-`, 'utf8');
+// Templates available
+const TEMPLATES = {
+  'basic': 'Basic frontend only template',
+  'full-stack': 'Complete frontend and backend template'
+};
 
-// Make the CLI executable
-try {
-  fs.chmodSync(cliIndexPath, '755');
-  console.log('CLI built successfully: dist/cli/index.js');
-} catch (error) {
-  console.warn('Could not make CLI executable:', error);
+// Colors for CLI output
+const colors = {
+  reset: '\\x1b[0m',
+  bright: '\\x1b[1m',
+  green: '\\x1b[32m',
+  blue: '\\x1b[34m',
+  red: '\\x1b[31m',
+  yellow: '\\x1b[33m'
+};
+
+// Get package.json to read version
+const packageJsonPath = path.resolve(__dirname, '../package.json');
+const packageJson = JSON.parse(fs.readFileSync(packageJsonPath, 'utf8'));
+
+// Print banner
+function printBanner() {
+  console.log(\`
+\${colors.blue}\${colors.bright}╔══════════════════════════════════════════════╗
+║                                              ║
+║   Frontend Hamroun v\${packageJson.version.padEnd(25)}║
+║   A lightweight frontend & backend framework  ║
+║                                              ║
+╚══════════════════════════════════════════════╝\${colors.reset}
+  \`);
 }
 
-// Create template directories in dist if missing
-const templateSrcDir = path.resolve(rootDir, 'templates');
-const templateDistDir = path.resolve(rootDir, 'dist/templates');
+// Print help
+function printHelp() {
+  console.log(\`
+\${colors.bright}USAGE:\${colors.reset}
+  \${colors.blue}npx frontend-hamroun\${colors.reset} [command] [options]
+
+\${colors.bright}COMMANDS:\${colors.reset}
+  \${colors.blue}create\${colors.reset} <project-name> [options]  Create a new project
+  \${colors.blue}help\${colors.reset}                           Display this help message
+  \${colors.blue}version\${colors.reset}                        Display version information
+
+\${colors.bright}OPTIONS:\${colors.reset}
+  \${colors.blue}--template\${colors.reset}, \${colors.blue}-t\${colors.reset} <template>       Specify template (default: basic)
+  \${colors.blue}--skip-install\${colors.reset}, \${colors.blue}-s\${colors.reset}            Skip package installation
+
+\${colors.bright}AVAILABLE TEMPLATES:\${colors.reset}
+\${Object.entries(TEMPLATES).map(([name, desc]) => \`  \${colors.blue}\${name.padEnd(12)}\${colors.reset} \${desc}\`).join('\\n')}
 
-// Copy templates recursively
-function copyTemplates() {
+\${colors.bright}EXAMPLES:\${colors.reset}
+  \${colors.blue}npx frontend-hamroun create\${colors.reset} my-app
+  \${colors.blue}npx frontend-hamroun create\${colors.reset} my-app --template full-stack
+  \`);
+}
+
+// Create project from template
+function createProject(projectName, options) {
+  const template = options.template || 'basic';
+  
+  // Check if template exists
+  if (!Object.keys(TEMPLATES).includes(template)) {
+    console.error(\`\${colors.red}error:\${colors.reset} Template "\${template}" not found.\`);
+    console.log(\`Available templates: \${Object.keys(TEMPLATES).join(', ')}\`);
+    process.exit(1);
+  }
+  
+  // Check if project directory already exists
+  const projectPath = path.resolve(process.cwd(), projectName);
+  if (fs.existsSync(projectPath)) {
+    console.error(\`\${colors.red}error:\${colors.reset} Directory \${projectName} already exists.\`);
+    process.exit(1);
+  }
+  
+  console.log(\`
+\${colors.bright}Creating a new project with Frontend Hamroun...\${colors.reset}
+\${colors.blue}• Project name:\${colors.reset} \${projectName}
+\${colors.blue}• Template:\${colors.reset} \${template}
+\${colors.blue}• Directory:\${colors.reset} \${projectPath}
+  \`);
+  
   try {
-    if (!fs.existsSync(templateDistDir)) {
-      fs.mkdirSync(templateDistDir, { recursive: true });
+    // Find templates directory
+    const templateDir = path.resolve(__dirname, '../templates', template);
+    
+    if (!fs.existsSync(templateDir)) {
+      console.error(\`\${colors.red}error:\${colors.reset} Template directory not found: \${templateDir}\`);
+      // Try to find template with -app suffix as fallback
+      const fallbackTemplateDir = path.resolve(__dirname, '../templates', \`\${template}-app\`);
+      if (fs.existsSync(fallbackTemplateDir)) {
+        console.log(\`\${colors.yellow}Using fallback template:\${colors.reset} \${template}-app\`);
+        templateDir = fallbackTemplateDir;
+      } else {
+        process.exit(1);
+      }
     }
     
-    // Copy each template
-    const templates = fs.readdirSync(templateSrcDir);
+    // Create project directory
+    fs.mkdirSync(projectPath, { recursive: true });
     
-    for (const template of templates) {
-      const srcTemplatePath = path.join(templateSrcDir, template);
-      const distTemplatePath = path.join(templateDistDir, template);
+    // Copy template files (recursive function)
+    function copyDir(src, dest) {
+      const entries = fs.readdirSync(src, { withFileTypes: true });
       
-      if (fs.statSync(srcTemplatePath).isDirectory()) {
-        if (!fs.existsSync(distTemplatePath)) {
-          fs.mkdirSync(distTemplatePath, { recursive: true });
-        }
+      for (const entry of entries) {
+        const srcPath = path.join(src, entry.name);
+        const destPath = path.join(dest, entry.name);
         
-        // Use cp -r for recursively copying
-        exec(`cp -r ${srcTemplatePath}/* ${distTemplatePath}`, (error) => {
-          if (error) {
-            console.error(`Error copying template ${template}:`, error);
-          } else {
-            console.log(`Copied template ${template} to dist`);
-          }
+        if (entry.isDirectory()) {
+          fs.mkdirSync(destPath, { recursive: true });
+          copyDir(srcPath, destPath);
+        } else {
+          fs.copyFileSync(srcPath, destPath);
+        }
+      }
+    }
+    
+    // Copy the files
+    copyDir(templateDir, projectPath);
+    console.log(\`\${colors.green}•\${colors.reset} Copied template files\`);
+    
+    // Update package.json with project name
+    const projectPackageJsonPath = path.join(projectPath, 'package.json');
+    if (fs.existsSync(projectPackageJsonPath)) {
+      const projectPackageJson = JSON.parse(fs.readFileSync(projectPackageJsonPath, 'utf8'));
+      projectPackageJson.name = projectName;
+      fs.writeFileSync(
+        projectPackageJsonPath, 
+        JSON.stringify(projectPackageJson, null, 2)
+      );
+    }
+    
+    // Install dependencies
+    if (!options.skipInstall) {
+      console.log(\`\\n\${colors.blue}Installing dependencies...\${colors.reset}\`);
+      
+      try {
+        execSync(\`npm install\`, { 
+          cwd: projectPath, 
+          stdio: 'inherit' 
         });
+      } catch (error) {
+        console.error(\`\\n\${colors.red}Failed to install dependencies. You can install them manually:\${colors.reset}\`);
+        console.log(\`  cd \${projectName} && npm install\`);
       }
     }
+    
+    // Success message
+    console.log(\`
+\${colors.green}\${colors.bright}Success!\${colors.reset} Created \${projectName} at \${projectPath}
+
+\${colors.blue}Inside that directory, you can run several commands:\${colors.reset}
+
+  \${colors.bright}npm run dev\${colors.reset}
+    Starts the development server.
+
+  \${colors.bright}npm run build\${colors.reset}
+    Builds the app for production.
+
+  \${colors.bright}npm start\${colors.reset}
+    Runs the built app in production mode.
+
+\${colors.blue}We suggest that you begin by typing:\${colors.reset}
+
+  \${colors.bright}cd\${colors.reset} \${projectName}
+  \${colors.bright}npm run dev\${colors.reset}
+
+\${colors.green}Happy coding!\${colors.reset}
+    \`);
+    
   } catch (error) {
-    console.error('Error copying templates:', error);
+    console.error(\`\${colors.red}Failed to create project:\${colors.reset}\`, error);
+    process.exit(1);
   }
 }
 
-copyTemplates();
+// Parse command line arguments
+function parseArgs() {
+  const args = process.argv.slice(2);
+  const command = args[0];
+  
+  if (!command || command === 'help') {
+    printBanner();
+    printHelp();
+    process.exit(0);
+  }
+  
+  if (command === 'version') {
+    console.log(\`frontend-hamroun v\${packageJson.version}\`);
+    process.exit(0);
+  }
+  
+  if (command === 'create') {
+    const projectName = args[1];
+    
+    if (!projectName) {
+      console.error(\`\${colors.red}error:\${colors.reset} Project name is required.\`);
+      console.log(\`Run \${colors.blue}npx frontend-hamroun help\${colors.reset} for usage information.\`);
+      process.exit(1);
+    }
+    
+    // Parse options
+    const options = {
+      template: 'basic',
+      skipInstall: false
+    };
+    
+    for (let i = 2; i < args.length; i++) {
+      if (args[i] === '--template' || args[i] === '-t') {
+        options.template = args[++i];
+      } else if (args[i] === '--skip-install' || args[i] === '-s') {
+        options.skipInstall = true;
+      }
+    }
+    
+    printBanner();
+    createProject(projectName, options);
+    return;
+  }
+  
+  console.error(\`\${colors.red}error:\${colors.reset} Unknown command: \${command}\`);
+  console.log(\`Run \${colors.blue}npx frontend-hamroun help\${colors.reset} for usage information.\`);
+  process.exit(1);
+}
+
+// Run CLI
+parseArgs();
+`;
+
+// Write CLI file with .mjs extension for ES modules
+fs.writeFileSync(path.join(binDir, 'cli.mjs'), cliContent, 'utf8');
+
+// Make CLI executable
+try {
+  fs.chmodSync(path.join(binDir, 'cli.mjs'), '755');
+  console.log('✅ CLI built successfully: bin/cli.mjs');
+} catch (error) {
+  console.warn('⚠️ Could not make CLI executable:', error);
+}
+
+// Let's make sure we also have template directories
+const templatesDir = path.resolve(rootDir, 'templates');
+const templateList = ['basic', 'full-stack'];
+
+console.log('🔍 Checking template directories...');
+for (const template of templateList) {
+  const templateDir = path.join(templatesDir, template);
+  const appTemplateDir = path.join(templatesDir, `${template}-app`);
+  
+  // Check if either directory exists
+  if (!fs.existsSync(templateDir) && !fs.existsSync(appTemplateDir)) {
+    console.log(`⚠️ Template directory "${template}" not found at: ${templateDir}`);
+    console.log(`⚠️ Template directory "${template}-app" not found at: ${appTemplateDir}`);
+    
+    // Create the template directory
+    console.log(`📁 Creating template directory: ${template}`);
+    fs.mkdirSync(templateDir, { recursive: true });
+    
+    // Create a minimal template
+    console.log(`📝 Creating minimal ${template} template`);
+    
+    // Create package.json
+    const packageJson = {
+      "name": "frontend-hamroun-app",
+      "private": true,
+      "version": "0.1.0",
+      "type": "module",
+      "scripts": {
+        "dev": "vite",
+        "build": "tsc && vite build",
+        "preview": "vite preview"
+      },
+      "dependencies": {
+        "frontend-hamroun": "latest"
+      },
+      "devDependencies": {
+        "@types/node": "^20.10.0",
+        "typescript": "^5.3.2",
+        "vite": "^5.0.0"
+      }
+    };
+    
+    fs.writeFileSync(
+      path.join(templateDir, 'package.json'),
+      JSON.stringify(packageJson, null, 2)
+    );
+    
+    // Create minimal files for the template
+    fs.writeFileSync(
+      path.join(templateDir, 'index.html'),
+      `<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Frontend Hamroun App</title>
+</head>
+<body>
+  <div id="app"></div>
+  <script type="module" src="/src/main.ts"></script>
+</body>
+</html>`
+    );
+    
+    // Create src directory
+    const srcDir = path.join(templateDir, 'src');
+    fs.mkdirSync(srcDir, { recursive: true });
+    
+    // Create basic files
+    fs.writeFileSync(
+      path.join(srcDir, 'main.ts'),
+      `import { render } from 'frontend-hamroun';
+import { App } from './App';
+
+document.addEventListener('DOMContentLoaded', () => {
+  const rootElement = document.getElementById('app');
+  if (rootElement) {
+    render(<App />, rootElement);
+  }
+});`
+    );
+    
+    fs.writeFileSync(
+      path.join(srcDir, 'App.tsx'),
+      `import { useState } from 'frontend-hamroun';
+
+export function App() {
+  const [count, setCount] = useState(0);
+  
+  return (
+    <div style={{ fontFamily: 'Arial, sans-serif', maxWidth: '600px', margin: '0 auto', padding: '2rem' }}>
+      <h1 style={{ color: '#333', textAlign: 'center' }}>Frontend Hamroun App</h1>
+      <div style={{ 
+        display: 'flex', 
+        flexDirection: 'column', 
+        alignItems: 'center',
+        marginTop: '2rem',
+        padding: '1rem',
+        border: '1px solid #ccc',
+        borderRadius: '8px'
+      }}>
+        <h2>Counter Example</h2>
+        <p>Count: {count}</p>
+        <div style={{ display: 'flex', gap: '8px' }}>
+          <button 
+            onClick={() => setCount(count - 1)}
+            style={{
+              padding: '8px 16px',
+              background: '#ff4d4d',
+              color: 'white',
+              border: 'none',
+              borderRadius: '4px',
+              cursor: 'pointer'
+            }}
+          >
+            Decrement
+          </button>
+          <button 
+            onClick={() => setCount(count + 1)}
+            style={{
+              padding: '8px 16px',
+              background: '#4d79ff',
+              color: 'white',
+              border: 'none',
+              borderRadius: '4px',
+              cursor: 'pointer'
+            }}
+          >
+            Increment
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}`
+    );
+    
+    // Create vite.config.ts
+    fs.writeFileSync(
+      path.join(templateDir, 'vite.config.ts'),
+      `import { defineConfig } from 'vite';
+
+export default defineConfig({
+  esbuild: {
+    jsxFactory: 'jsx',
+    jsxFragment: 'Fragment'
+  },
+  build: {
+    outDir: 'dist',
+    emptyOutDir: true
+  }
+});`
+    );
+    
+    // Create tsconfig files
+    fs.writeFileSync(
+      path.join(templateDir, 'tsconfig.json'),
+      `{
+  "compilerOptions": {
+    "target": "ES2020",
+    "useDefineForClassFields": true,
+    "module": "ESNext",
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "skipLibCheck": true,
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "preserve",
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true
+  },
+  "include": ["src"],
+  "references": [{ "path": "./tsconfig.node.json" }]
+}`
+    );
+    
+    fs.writeFileSync(
+      path.join(templateDir, 'tsconfig.node.json'),
+      `{
+  "compilerOptions": {
+    "composite": true,
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "allowSyntheticDefaultImports": true
+  },
+  "include": ["vite.config.ts"]
+}`
+    );
+    
+    console.log(`✅ Created minimal ${template} template`);
+  } else {
+    if (fs.existsSync(templateDir)) {
+      console.log(`✅ Template found: ${template}`);
+    } else {
+      console.log(`✅ Template found: ${template}-app (will use as fallback)`);
+    }
+  }
+}
+
+// Create a CJS wrapper for environments that don't support ESM out of the box
+const cjsWrapper = `#!/usr/bin/env node
+// This file is a CommonJS wrapper for the ES module CLI
+// It loads the actual CLI implementation using dynamic import()
+
+async function main() {
+  try {
+    // Use dynamic import to load the ES module CLI
+    const cliPath = new URL('../bin/cli.mjs', import.meta.url).href;
+    await import(cliPath);
+  } catch (error) {
+    console.error('Error loading CLI:', error);
+    process.exit(1);
+  }
+}
+
+main();
+`;
+
+fs.writeFileSync(path.join(binDir, 'cli.cjs'), cjsWrapper, 'utf8');
+fs.chmodSync(path.join(binDir, 'cli.cjs'), '755');
+console.log('✅ Created CJS wrapper: bin/cli.cjs');
+
+console.log('✅ CLI build process completed');

package/src/cli/index.ts

@@ -13,8 +13,14 @@ const __dirname = path.dirname(__filename);
 const packageJsonPath = path.resolve(__dirname, '../../package.json');
 const packageJson = JSON.parse(fs.readFileSync(packageJsonPath, 'utf8'));
 
+// Define interfaces for type safety
+interface ProjectOptions {
+  template: string;
+  skipInstall: boolean;
+}
+
 // Available templates
-const TEMPLATES = {
+const TEMPLATES: Record<string, string> = {
   'basic': 'Basic frontend only template',
   'full-stack': 'Complete frontend and backend template',
   'api-only': 'Backend API only template'
@@ -31,7 +37,7 @@ const colors = {
 };
 
 // Create readline interface
-function createInterface() {
+function createInterface(): readline.Interface {
   return readline.createInterface({
     input: process.stdin,
     output: process.stdout
@@ -39,7 +45,7 @@ function createInterface() {
 }
 
 // Print banner
-function printBanner() {
+function printBanner(): void {
   console.log(`
 ${colors.blue}${colors.bright}╔══════════════════════════════════════════════╗
 ║                                              ║
@@ -51,7 +57,7 @@ ${colors.blue}${colors.bright}╔═══════════════
 }
 
 // Print help
-function printHelp() {
+function printHelp(): void {
   console.log(`
 ${colors.bright}USAGE:${colors.reset}
   ${colors.blue}npx frontend-hamroun${colors.reset} [command] [options]
@@ -76,7 +82,7 @@ ${colors.bright}EXAMPLES:${colors.reset}
 }
 
 // Create project from template
-async function createProject(projectName, options) {
+async function createProject(projectName: string, options: ProjectOptions): Promise<void> {
   const template = options.template || 'basic';
   
   // Check if template exists
@@ -165,7 +171,7 @@ ${colors.green}Happy coding!${colors.reset}
 }
 
 // Copy template files recursively
-function copyTemplateFiles(source, destination) {
+function copyTemplateFiles(source: string, destination: string): void {
   const files = fs.readdirSync(source);
   
   for (const file of files) {
@@ -186,7 +192,7 @@ function copyTemplateFiles(source, destination) {
 }
 
 // Detect package manager
-function getPackageManager() {
+function getPackageManager(): string {
   try {
     const userAgent = process.env.npm_config_user_agent;
     if (userAgent && userAgent.startsWith('yarn')) {
@@ -199,7 +205,7 @@ function getPackageManager() {
 }
 
 // Parse command line arguments
-function parseArgs() {
+function parseArgs(): void {
   const args = process.argv.slice(2);
   const command = args[0];
   
@@ -224,7 +230,7 @@ function parseArgs() {
     }
     
     // Parse options
-    const options = {
+    const options: ProjectOptions = {
       template: 'basic',
       skipInstall: false
     };

package/templates/basic/.eslintignore

@@ -0,0 +1,5 @@
+node_modules
+dist
+coverage
+*.config.js
+*.config.ts

package/templates/basic/.eslintrc.json

@@ -0,0 +1,25 @@
+{
+  "root": true,
+  "env": {
+    "browser": true,
+    "es2020": true
+  },
+  "extends": [
+    "eslint:recommended",
+    "plugin:@typescript-eslint/recommended"
+  ],
+  "ignorePatterns": ["dist", ".eslintrc.json"],
+  "parser": "@typescript-eslint/parser",
+  "plugins": [
+    "@typescript-eslint",
+    "react-refresh"
+  ],
+  "rules": {
+    "react-refresh/only-export-components": [
+      "warn",
+      { "allowConstantExport": true }
+    ],
+    "@typescript-eslint/no-explicit-any": "off",
+    "@typescript-eslint/ban-ts-comment": "off"
+  }
+}

package/templates/basic/docs/rapport_pfe.aux

@@ -0,0 +1,27 @@
+\relax 
+\providecommand\babel@aux[2]{}
+\@nameuse{bbl@beforestart}
+\catcode `:\active 
+\catcode `;\active 
+\catcode `!\active 
+\catcode `?\active 
+\providecommand\hyper@newdestlabel[2]{}
+\providecommand\HyField@AuxAddToFields[1]{}
+\providecommand\HyField@AuxAddToCoFields[2]{}
+\babel@aux{french}{}
+\@writefile{toc}{\contentsline {chapter}{\numberline {1}ÉTUDE PREALABLE}{2}{chapter.1}\protected@file@percent }
+\@writefile{lof}{\addvspace {10\p@ }}
+\@writefile{lot}{\addvspace {10\p@ }}
+\@writefile{toc}{\contentsline {section}{\numberline {1.1}Introduction}{2}{section.1.1}\protected@file@percent }
+\@writefile{toc}{\contentsline {section}{\numberline {1.2}Organisme d'accueil}{2}{section.1.2}\protected@file@percent }
+\@writefile{toc}{\contentsline {section}{\numberline {1.3}Étude et critique de l'existant}{2}{section.1.3}\protected@file@percent }
+\@writefile{toc}{\contentsline {subsection}{\numberline {1.3.1}Critique de l'existant}{2}{subsection.1.3.1}\protected@file@percent }
+\@writefile{toc}{\contentsline {subsection}{\numberline {1.3.2}Solution proposée}{2}{subsection.1.3.2}\protected@file@percent }
+\@writefile{toc}{\contentsline {section}{\numberline {1.4}Choix méthodologique}{3}{section.1.4}\protected@file@percent }
+\@writefile{toc}{\contentsline {subsection}{\numberline {1.4.1}Formalisme de modélisation}{3}{subsection.1.4.1}\protected@file@percent }
+\@writefile{toc}{\contentsline {subsection}{\numberline {1.4.2}Méthodologie}{3}{subsection.1.4.2}\protected@file@percent }
+\@writefile{toc}{\contentsline {subsubsection}{Présentation de la méthode SCRUM}{3}{section*.2}\protected@file@percent }
+\@writefile{toc}{\contentsline {subsubsection}{La répartition des rôles dans la méthode SCRUM}{3}{section*.3}\protected@file@percent }
+\@writefile{toc}{\contentsline {subsubsection}{Le processus de SCRUM}{3}{section*.4}\protected@file@percent }
+\@writefile{toc}{\contentsline {section}{\numberline {1.5}Conclusion}{3}{section.1.5}\protected@file@percent }
+\gdef \@abspage@last{4}