@shohojdhara/atomix 0.4.8 → 0.4.9

package/scripts/cli/internal/filesystem.js

@@ -3,10 +3,65 @@
  * Utilities for safe file and path operations
  */
 
-import { resolve, normalize, isAbsolute, relative } from 'path';
-import { access } from 'fs/promises';
+import { resolve, normalize, isAbsolute, relative, dirname } from 'path';
+import { access, writeFile, mkdir, readFile } from 'fs/promises';
+import { logger } from '../utils/logger.js';
+import chalk from 'chalk';
+import { 
+  validateSecurePath, 
+  createBackup, 
+  retryWithBackoff 
+} from '../utils/security.js';
 
 export const filesystem = {
+  /**
+   * Safe file write with dry-run support, backup, and retry mechanism
+   * @param {string} path - Path to write to
+   * @param {string} content - Content to write
+   * @param {object} options - Options
+   */
+  async writeFile(path, content, options = {}) {
+    if (process.env.ATOMIX_DRY_RUN === 'true') {
+      logger.info(`${chalk.cyan('[DRY RUN]')} Would write file: ${chalk.bold(path)}`);
+      if (options.debug) {
+        logger.debug('Content:', content);
+      }
+      return true;
+    }
+
+    // Validate path security
+    const pathValidation = validateSecurePath(path);
+    if (!pathValidation.isValid) {
+      throw new Error(`Security validation failed for path ${path}: ${pathValidation.error}`);
+    }
+
+    const safePath = pathValidation.safePath;
+
+    const writeOperation = async () => {
+      try {
+        const dir = dirname(safePath);
+        await mkdir(dir, { recursive: true });
+        
+        // Create backup if file exists and backup is enabled
+        if (options.backup !== false && await this.exists(safePath)) {
+          try {
+            await createBackup(safePath);
+          } catch (backupError) {
+            logger.warn(`Backup failed for ${safePath}: ${backupError.message}`);
+          }
+        }
+        
+        await writeFile(safePath, content, options);
+        return true;
+      } catch (error) {
+        throw new Error(`Failed to write file ${safePath}: ${error.message}`);
+      }
+    };
+
+    // Use retry mechanism for file operations
+    return retryWithBackoff(writeOperation, options.maxRetries || 2, options.retryDelay || 100);
+  },
+
   /**
    * Validates and resolves a path within the project directory
    * @param {string} inputPath - The path to validate
@@ -54,5 +109,50 @@ export const filesystem = {
     } catch {
       return false;
     }
+  },
+
+  /**
+   * Create directory recursively with dry-run support
+   * @param {string} path - Directory path to create
+   * @param {object} options - Options
+   * @returns {Promise<boolean>} Success status
+   */
+  async createDirectory(path, options = {}) {
+    if (process.env.ATOMIX_DRY_RUN === 'true') {
+      logger.info(`${chalk.cyan('[DRY RUN]')} Would create directory: ${chalk.bold(path)}`);
+      return true;
+    }
+
+    const pathValidation = validateSecurePath(path);
+    if (!pathValidation.isValid) {
+      throw new Error(`Security validation failed for path ${path}: ${pathValidation.error}`);
+    }
+
+    const safePath = pathValidation.safePath;
+
+    try {
+      await mkdir(safePath, { recursive: true });
+      logger.debug(`Created directory: ${safePath}`);
+      return true;
+    } catch (error) {
+      throw new Error(`Failed to create directory ${safePath}: ${error.message}`);
+    }
+  },
+
+  /**
+   * Read file content with encoding
+   * @param {string} path - File path
+   * @param {string} encoding - File encoding (default: utf8)
+   * @returns {Promise<string>} File content
+   */
+  async readFile(path, encoding = 'utf8') {
+    try {
+      const content = await readFile(path, encoding);
+      return content;
+    } catch (error) {
+      throw new Error(`Failed to read file ${path}: ${error.message}`);
+    }
   }
 };
+
+export default filesystem;

package/scripts/cli/internal/generator.js

@@ -3,16 +3,26 @@
  * Core logic for scaffolding components and assets
  */
 
-import { writeFile, mkdir, readFile } from 'fs/promises';
+import { readFile } from 'fs/promises';
 import { existsSync } from 'fs';
 import { join } from 'path';
-import { componentTemplates } from '../templates.js';
+import { templateEngine, COMPLEXITY_LEVELS } from './template-engine.js';
+import { detectFramework } from '../utils/detector.js';
+import { filesystem } from './filesystem.js';
+import { aiEngine } from './ai-engine.js';
+import { 
+  sanitizeInput, 
+  validateComponentNameSecure, 
+  RateLimiter 
+} from '../utils/security.js';
+import { AtomixCLIError } from '../utils/error.js';
+import { tokenProvider } from './tokens/token-provider.js';
+import { tokenValidator } from './tokens/token-validator.js';
+import { componentValidator } from './component-validator.js';
+import { generateComponentStylesPackage } from './itcss-generator.js';
+import { generateHookFile } from './hook-generator.js';
 
-export const COMPLEXITY_LEVELS = {
-  SIMPLE: { name: 'simple', template: 'simple' },
-  MEDIUM: { name: 'medium', template: 'medium' },
-  COMPLEX: { name: 'complex', template: 'complex' }
-};
+export { COMPLEXITY_LEVELS };
 
 export const COMPONENT_FEATURES = {
   TYPESCRIPT: { name: 'typescript', default: true },
@@ -23,9 +33,16 @@ export const COMPONENT_FEATURES = {
   ACCESSIBILITY: { name: 'accessibility', default: true }
 };
 
+// Global rate limiter for AI operations
+const aiRateLimiter = new RateLimiter(5, 60000); // 5 requests per minute
+
 export const generator = {
   /**
    * Generates component files based on options
+   * @param {string} name - Component name
+   * @param {Object} options - Generation options
+   * @returns {Promise<string>} Path to generated component
+   * @throws {AtomixCLIError} If generation fails
    */
   async generateComponent(name, options = {}) {
     const {
@@ -35,52 +52,338 @@ export const generator = {
       logger
     } = options;
 
-    const componentPath = join(outputPath, name);
-    await mkdir(componentPath, { recursive: true });
+    // Sanitize and validate component name
+    const sanitizedName = sanitizeInput(name, 'componentName');
+    const validation = validateComponentNameSecure(sanitizedName);
+    if (!validation.isValid) {
+      throw new AtomixCLIError(
+        `Component name validation failed: ${validation.error}`,
+        'INVALID_COMPONENT_NAME',
+        [
+          'Use PascalCase (e.g., MyComponent, Button)',
+          'Start with a letter (not numbers)',
+          'Avoid special characters except letters and numbers'
+        ]
+      );
+    }
+
+    // Detect framework
+    let framework;
+    try {
+      framework = await detectFramework();
+      if (logger) logger.debug(`Detected framework: ${framework}`);
+    } catch (error) {
+      throw new AtomixCLIError(
+        `Framework detection failed: ${error.message}`,
+        'FRAMEWORK_DETECTION_FAILED',
+        [
+          'Ensure package.json exists in project root',
+          'Check for React, Next.js, or vanilla project structure',
+          'Run `atomix doctor` to diagnose environment issues'
+        ]
+      );
+    }
+
+    // Load design tokens if available
+    let availableTokens = {};
+    try {
+      const tokenPaths = [
+        './design-tokens/tokens.json',
+        './src/design-tokens/tokens.json',
+        './tokens.json'
+      ];
+      
+      for (const tokenPath of tokenPaths) {
+        if (existsSync(join(process.cwd(), tokenPath))) {
+          availableTokens = await tokenProvider.loadTokens(tokenPath);
+          if (logger) logger.debug(`Loaded design tokens from ${tokenPath}`);
+          break;
+        }
+      }
+    } catch (error) {
+      if (logger) logger.debug(`Token loading skipped: ${error.message}`);
+    }
+
+    const componentPath = join(outputPath, sanitizedName);
 
     // 1. Generate Component File
-    const templateName = COMPLEXITY_LEVELS[complexity.toUpperCase()]?.template || 'medium';
-    let content = '';
-    
-    switch (templateName) {
-      case 'simple': content = componentTemplates.react.simple(name); break;
-      case 'medium': content = componentTemplates.react.medium(name); break;
-      case 'complex': content = componentTemplates.react.complex(name); break;
-      default: content = componentTemplates.react.component(name);
+    let content;
+    let ext = '.tsx';
+
+    try {
+      if (framework === 'vanilla') {
+        const templateFn = templateEngine.selectTemplate('vanilla', complexity, 'component');
+        content = templateEngine.render(templateFn, sanitizedName);
+        ext = '.html';
+      } else if (framework === 'next') {
+        const templateFn = templateEngine.selectTemplate('next', complexity, 'component');
+        content = templateEngine.render(templateFn, sanitizedName);
+      } else {
+        // Default to React
+        const templateFn = templateEngine.selectTemplate('react', complexity, 'component');
+        content = templateEngine.render(templateFn, sanitizedName);
+      }
+    } catch (error) {
+      if (error instanceof AtomixCLIError) {
+        throw error;
+      }
+      throw new AtomixCLIError(
+        `Failed to select template: ${error.message}`,
+        'TEMPLATE_SELECTION_FAILED',
+        [
+          `Check if complexity level '${complexity}' is valid`,
+          `Verify framework '${framework}' is supported`,
+          'Run `atomix doctor` to check template availability'
+        ]
+      );
     }
 
-    await writeFile(join(componentPath, `${name}.tsx`), content, 'utf8');
-    if (logger) logger.debug(`Created ${name}.tsx`);
+    // Validate generated component against design system rules
+    const componentValidation = tokenValidator.validateComponent(content, availableTokens);
+    if (!componentValidation.valid && logger) {
+      logger.debug(`Component validation: ${componentValidation.issues.length} issues found`);
+    }
 
-    // 2. Index File
-    await writeFile(join(componentPath, 'index.ts'), componentTemplates.react.index(name), 'utf8');
+    await filesystem.writeFile(join(componentPath, `${sanitizedName}${ext}`), content, 'utf8');
+    if (logger) logger.debug(`Created ${sanitizedName}${ext}`);
+
+    // 2. Index File (only for React/Next)
+    if (framework !== 'vanilla') {
+      try {
+        const indexTemplateFn = templateEngine.selectTemplate(framework, complexity, 'index');
+        const indexContent = templateEngine.render(indexTemplateFn, sanitizedName);
+        await filesystem.writeFile(join(componentPath, 'index.ts'), indexContent, 'utf8');
+        if (logger) logger.debug(`Created index.ts`);
+      } catch (error) {
+        throw new AtomixCLIError(
+          `Failed to generate index file: ${error.message}`,
+          'INDEX_GENERATION_FAILED',
+          [
+            'Check index template exists for framework',
+            'Verify template exports in template files',
+            'Try generating without index feature'
+          ]
+        );
+      }
+    }
 
     // 3. Optional Features
     if (features.includes('storybook')) {
-      await writeFile(join(componentPath, `${name}.stories.tsx`), componentTemplates.react.story(name), 'utf8');
+      try {
+        const storyTemplateFn = templateEngine.selectTemplate(framework, complexity, 'story');
+        const storyContent = templateEngine.render(storyTemplateFn, sanitizedName);
+        await filesystem.writeFile(join(componentPath, `${sanitizedName}.stories.tsx`), storyContent, 'utf8');
+        if (logger) logger.debug(`Created ${sanitizedName}.stories.tsx`);
+      } catch (error) {
+        throw new AtomixCLIError(
+          `Failed to generate Storybook story: ${error.message}`,
+          'STORYBOOK_GENERATION_FAILED',
+          [
+            'Check storybook template exists',
+            'Verify story feature is supported for this framework',
+            'Try generating without --storybook flag'
+          ]
+        );
+      }
     }
 
     if (features.includes('tests')) {
-      await writeFile(join(componentPath, `${name}.test.tsx`), componentTemplates.react.test(name), 'utf8');
+      try {
+        const testTemplateFn = templateEngine.selectTemplate(framework, complexity, 'test');
+        const testContent = templateEngine.render(testTemplateFn, sanitizedName);
+        await filesystem.writeFile(join(componentPath, `${sanitizedName}.test.tsx`), testContent, 'utf8');
+        if (logger) logger.debug(`Created ${sanitizedName}.test.tsx`);
+      } catch (error) {
+        throw new AtomixCLIError(
+          `Failed to generate test file: ${error.message}`,
+          'TEST_GENERATION_FAILED',
+          [
+            'Check test template exists',
+            'Verify test feature is supported for this framework',
+            'Try generating without --tests flag'
+          ]
+        );
+      }
     }
 
-    if (features.includes('hook')) {
-      const hookDir = join(outputPath, '..', 'lib', 'composables');
-      await mkdir(hookDir, { recursive: true });
-      await writeFile(join(hookDir, `use${name}.ts`), componentTemplates.composable.useHook(name), 'utf8');
+    if (features.includes('hook') && framework !== 'vanilla') {
+      try {
+        const hookDir = join(outputPath, '..', 'lib', 'composables');
+        const hookTemplateFn = templateEngine.selectTemplate(framework, complexity, 'hook');
+        const hookContent = templateEngine.render(hookTemplateFn, sanitizedName);
+        await filesystem.writeFile(join(hookDir, `use${sanitizedName}.ts`), hookContent, 'utf8');
+        if (logger) logger.debug(`Created use${sanitizedName}.ts`);
+      } catch (error) {
+        throw new AtomixCLIError(
+          `Failed to generate composable hook: ${error.message}`,
+          'HOOK_GENERATION_FAILED',
+          [
+            'Check hook template exists',
+            'Verify hook feature is supported for this framework',
+            'Try generating without --hook flag'
+          ]
+        );
+      }
     }
 
-    // 4. Styles (ITCSS)
+    // 4. Styles (ITCSS) - Enhanced with auto-generation
     if (features.includes('styles')) {
-      const stylesDir = join(outputPath, '..', 'styles');
-      
-      const settingsPath = join(stylesDir, '01-settings');
-      await mkdir(settingsPath, { recursive: true });
-      await writeFile(join(settingsPath, `_settings.${name.toLowerCase()}.scss`), componentTemplates.scss.settings(name), 'utf8');
+      try {
+        const stylesResult = await generateComponentStylesPackage(sanitizedName, process.cwd(), {
+          force: options.force || false
+        });
+        
+        if (logger && stylesResult.created.length > 0) {
+          logger.debug(`Created ${stylesResult.created.length} ITCSS style files`);
+        }
+      } catch (error) {
+        throw new AtomixCLIError(
+          `Failed to generate ITCSS styles: ${error.message}`,
+          'STYLE_GENERATION_FAILED',
+          [
+            'Check SCSS templates exist',
+            'Verify styles directory structure',
+            'Try generating without --styles flag'
+          ]
+        );
+      }
+    }
+
+    // 5. Composable Hook - Enhanced generation
+    if (features.includes('hook') && framework !== 'vanilla') {
+      try {
+        const hookResult = await generateHookFile(sanitizedName, process.cwd(), {
+          force: options.force || false
+        });
+        
+        if (logger && hookResult.created.length > 0) {
+          logger.debug(`Created ${hookResult.created.length} composable hook files`);
+        }
+      } catch (error) {
+        throw new AtomixCLIError(
+          `Failed to generate composable hook: ${error.message}`,
+          'HOOK_GENERATION_FAILED',
+          [
+            'Check hook template exists',
+            'Verify hook feature is supported for this framework',
+            'Try generating without --hook flag'
+          ]
+        );
+      }
+    }
+
+    return componentPath;
+  },
+
+  /**
+   * Generates component files using AI based on a prompt
+   * @param {string} name - Component name
+   * @param {string} prompt - AI prompt
+   * @param {Object} options - Generation options
+   * @returns {Promise<string>} Path to generated component
+   * @throws {AtomixCLIError} If generation fails
+   */
+  async generateAIComponent(name, prompt, options = {}) {
+    const { outputPath, logger } = options;
+    
+    // Apply rate limiting for AI operations
+    const userId = process.env.USER || 'anonymous';
+    if (!aiRateLimiter.checkLimit(userId)) {
+      throw new AtomixCLIError(
+        `Rate limit exceeded. Please wait before generating more AI components. Remaining: ${aiRateLimiter.getRemaining(userId)} seconds`,
+        'RATE_LIMIT_EXCEEDED',
+        [
+          'Wait for rate limit to reset (60 seconds)',
+          'Reduce frequency of AI component generation',
+          'Use regular generation instead of AI for simple components'
+        ]
+      );
+    }
+
+    // Sanitize inputs
+    const sanitizedName = sanitizeInput(name, 'componentName');
+    sanitizeInput(prompt, 'prompt'); // Sanitize but use original
+    
+    const validation = validateComponentNameSecure(sanitizedName);
+    if (!validation.isValid) {
+      throw new AtomixCLIError(
+        `Component name validation failed: ${validation.error}`,
+        'INVALID_COMPONENT_NAME',
+        [
+          'Use PascalCase (e.g., MyComponent, Button)',
+          'Start with a letter (not numbers)',
+          'Avoid special characters except letters and numbers'
+        ]
+      );
+    }
 
-      const compStylesPath = join(stylesDir, '06-components');
-      await mkdir(compStylesPath, { recursive: true });
-      await writeFile(join(compStylesPath, `_components.${name.toLowerCase()}.scss`), componentTemplates.scss.component(name), 'utf8');
+    const componentPath = join(outputPath, sanitizedName);
+
+    // Call AI Engine
+    let generated;
+    try {
+      generated = await aiEngine.generateComponent(name, prompt);
+    } catch (error) {
+      throw new AtomixCLIError(
+        `AI generation failed: ${error.message}`,
+        'AI_GENERATION_FAILED',
+        [
+          'Check your internet connection',
+          'Verify AI engine credentials are configured',
+          'Try again in a few moments',
+          'Use regular generation as fallback'
+        ]
+      );
+    }
+
+    // Write component file
+    try {
+      await filesystem.writeFile(join(componentPath, `${sanitizedName}.tsx`), generated.component, 'utf8');
+      if (logger) logger.debug(`Created ${sanitizedName}.tsx (AI)`);
+    } catch (error) {
+      throw new AtomixCLIError(
+        `Failed to write AI-generated component: ${error.message}`,
+        'FILE_WRITE_FAILED',
+        [
+          'Check you have write permissions for the target directory',
+          'Ensure the path is valid and within project root',
+          'Verify disk space is available'
+        ]
+      );
+    }
+
+    // Index file
+    try {
+      const indexTemplateFn = templateEngine.selectTemplate('react', 'medium', 'index');
+      const indexContent = templateEngine.render(indexTemplateFn, sanitizedName);
+      await filesystem.writeFile(join(componentPath, 'index.ts'), indexContent, 'utf8');
+    } catch (error) {
+      throw new AtomixCLIError(
+        `Failed to write index file: ${error.message}`,
+        'FILE_WRITE_FAILED',
+        [
+          'Check index template exists',
+          'Verify write permissions',
+          'AI generation may have incomplete templates'
+        ]
+      );
+    }
+
+    // Optional files from AI
+    if (generated.styles) {
+      await filesystem.writeFile(join(componentPath, `${sanitizedName}.scss`), generated.styles, 'utf8');
+    }
+
+    if (generated.tests) {
+      await filesystem.writeFile(join(componentPath, `${sanitizedName}.test.tsx`), generated.tests, 'utf8');
+    }
+
+    if (generated.stories) {
+      await filesystem.writeFile(join(componentPath, `${sanitizedName}.stories.tsx`), generated.stories, 'utf8');
+    }
+
+    if (generated.readme) {
+      await filesystem.writeFile(join(componentPath, 'README.md'), generated.readme, 'utf8');
     }
 
     return componentPath;
@@ -88,6 +391,9 @@ export const generator = {
 
   /**
    * Validates a generated component
+   * @param {string} name - Component name
+   * @param {string} componentPath - Path to component directory
+   * @returns {Promise<Object>} { valid: boolean, issues: string[] }
    */
   async validate(name, componentPath) {
     const issues = [];
@@ -99,11 +405,25 @@ export const generator = {
     }
 
     const content = await readFile(componentFile, 'utf8');
-    if (!content.includes('displayName')) issues.push('Missing displayName');
-    if (!content.includes('aria-')) issues.push('Missing accessibility attributes');
+    
+    // Use new component validator for comprehensive checks
+    const validationResults = componentValidator.validate(content, name);
+    
+    // Add all issues from component validator
+    for (const issue of validationResults.issues) {
+      issues.push(`[${issue.rule}] ${issue.message}${issue.suggestion ? ' - ' + issue.suggestion : ''}`);
+    }
+    
+    // Legacy checks (keep for backward compatibility)
+    // 1. Check for displayName (already covered by componentValidator)
+    // 2. Check for JSDoc documentation (already covered)
+    // 3. Check for TypeScript type definitions (already covered)
+    // 4. Check for forwardRef usage (already covered)
+    // 5. Check for Accessibility attributes (already covered)
+    // 6. Check for hardcoded colors (already covered)
 
     return {
-      valid: issues.length === 0,
+      valid: validationResults.valid,
       issues
     };
   }