@shohojdhara/atomix 0.5.0 → 0.5.2

package/scripts/cli/internal/ai-engine.js

@@ -17,9 +17,15 @@ export class AIEngine {
 
   /**
    * Generate component code based on prompt
+   * @param {string} name - Component name
+   * @param {string} prompt - User prompt for AI
+   * @param {Object} options - Override options (provider, model, temperature, maxTokens)
    */
-  async generateComponent(name, prompt) {
-    const provider = this.config.provider || 'openai';
+  async generateComponent(name, prompt, options = {}) {
+    const provider = options.provider || this.config.provider || 'openai';
+    const model = options.model || this.config.model;
+    const temperature = options.temperature ?? this.config.temperature ?? 0.7;
+    const maxTokens = options.maxTokens || this.config.maxTokens || 4000;
     const apiKey = this.config.apiKey || process.env.ATOMIX_AI_API_KEY;
 
     if (!apiKey) {
@@ -31,9 +37,9 @@ export class AIEngine {
     try {
       let response;
       if (provider === 'openai') {
-        response = await this.callOpenAI(name, prompt, apiKey);
+        response = await this.callOpenAI(name, prompt, apiKey, model, temperature, maxTokens);
       } else if (provider === 'anthropic') {
-        response = await this.callAnthropic(name, prompt, apiKey);
+        response = await this.callAnthropic(name, prompt, apiKey, model, temperature, maxTokens);
       } else {
         throw new Error(`Unsupported AI provider: ${provider}`);
       }
@@ -47,9 +53,15 @@ export class AIEngine {
 
   /**
    * Call OpenAI API
+   * @param {string} name - Component name
+   * @param {string} prompt - User prompt
+   * @param {string} apiKey - API key
+   * @param {string} [modelOverride] - Model override
+   * @param {number} [temperature] - Temperature (0.0-1.0)
+   * @param {number} [maxTokens] - Max tokens
    */
-  async callOpenAI(name, prompt, apiKey) {
-    const model = this.config.model || 'gpt-4';
+  async callOpenAI(name, prompt, apiKey, modelOverride, temperature, maxTokens) {
+    const model = modelOverride || 'gpt-4';
     const systemPrompt = this.getSystemPrompt(name);
 
     const response = await fetch('https://api.openai.com/v1/chat/completions', {
@@ -64,7 +76,8 @@ export class AIEngine {
           { role: 'system', content: systemPrompt },
           { role: 'user', content: prompt }
         ],
-        temperature: 0.7
+        temperature: temperature,
+        max_tokens: maxTokens
       })
     });
 
@@ -79,9 +92,15 @@ export class AIEngine {
 
   /**
    * Call Anthropic API
+   * @param {string} name - Component name
+   * @param {string} prompt - User prompt
+   * @param {string} apiKey - API key
+   * @param {string} [modelOverride] - Model override
+   * @param {number} [temperature] - Temperature (0.0-1.0)
+   * @param {number} [maxTokens] - Max tokens
    */
-  async callAnthropic(name, prompt, apiKey) {
-    const model = this.config.model || 'claude-3-sonnet-20240229';
+  async callAnthropic(name, prompt, apiKey, modelOverride, temperature, maxTokens) {
+    const model = modelOverride || 'claude-3-sonnet-20240229';
     const systemPrompt = this.getSystemPrompt(name);
 
     const response = await fetch('https://api.anthropic.com/v1/messages', {
@@ -93,7 +112,8 @@ export class AIEngine {
       },
       body: JSON.stringify({
         model: model,
-        max_tokens: 4000,
+        max_tokens: maxTokens,
+        temperature: temperature,
         system: systemPrompt,
         messages: [
           { role: 'user', content: prompt }

package/scripts/cli/internal/complexity-utils.js

@@ -0,0 +1,60 @@
+/**
+ * Framework-aware default complexity and normalization for component templates.
+ */
+
+/** @typedef {'react' | 'next' | 'vanilla'} Framework */
+
+/**
+ * Default complexity when the user does not pass --complexity (framework-specific).
+ * @param {Framework} framework
+ * @returns {'simple' | 'medium' | 'complex' | 'client'}
+ */
+export function resolveDefaultComplexity(framework) {
+  const f = String(framework).toLowerCase();
+  if (f === 'next') return 'simple';
+  if (f === 'vanilla') return 'medium';
+  return 'medium';
+}
+
+/**
+ * Map requested complexity to a value valid for selectTemplate (Next has no "medium").
+ * @param {Framework} framework
+ * @param {string} [complexity]
+ * @returns {string}
+ */
+export function normalizeComplexityForFramework(framework, complexity) {
+  const f = String(framework).toLowerCase();
+  const c = (complexity || resolveDefaultComplexity(f)).toLowerCase();
+
+  if (f === 'vanilla') {
+    return c;
+  }
+
+  if (f === 'next') {
+    const valid = ['simple', 'client', 'complex'];
+    if (valid.includes(c)) return c;
+    if (c === 'medium') return 'simple';
+    return 'simple';
+  }
+
+  if (f === 'react') {
+    const valid = ['simple', 'medium', 'complex'];
+    if (valid.includes(c)) return c;
+    return 'medium';
+  }
+
+  return c;
+}
+
+/**
+ * Resolve effective complexity: use explicit value when provided, else framework default.
+ * @param {Framework} framework
+ * @param {string|undefined} explicitComplexity - undefined when CLI did not pass --complexity
+ */
+export function resolveEffectiveComplexity(framework, explicitComplexity) {
+  const f = String(framework).toLowerCase();
+  if (explicitComplexity === undefined || explicitComplexity === '') {
+    return normalizeComplexityForFramework(f, resolveDefaultComplexity(f));
+  }
+  return normalizeComplexityForFramework(f, explicitComplexity);
+}

package/scripts/cli/internal/component-validator.js

@@ -9,6 +9,26 @@ import { join } from 'path';
 import { logger } from '../utils/logger.js';
 import { AtomixCLIError } from '../utils/error.js';
 
+/**
+ * Next.js server components (no "use client") do not use forwardRef / client hooks.
+ * @param {string} content
+ */
+function isNextServerOnlyComponent(content) {
+  if (content.includes("'use client'") || content.includes('"use client"')) {
+    return false;
+  }
+  if (content.includes('forwardRef')) {
+    return false;
+  }
+  if (/export\s+default\s+async\s+function/.test(content) || /export\s+default\s+function/.test(content)) {
+    return true;
+  }
+  if (/async\s+function\s+\w+/.test(content) && /export\s+default\s+\w+/.test(content)) {
+    return true;
+  }
+  return false;
+}
+
 /**
  * Component validation rule severity levels
  */
@@ -31,7 +51,11 @@ export const COMPONENT_RULES = {
     severity: COMPONENT_SEVERITY.ERROR,
     validate: (content) => {
       const issues = [];
-      
+
+      if (isNextServerOnlyComponent(content)) {
+        return issues;
+      }
+
       if (!content.includes('forwardRef')) {
         issues.push({
           rule: 'forward-ref-required',
@@ -40,7 +64,7 @@ export const COMPONENT_RULES = {
           severity: COMPONENT_SEVERITY.ERROR
         });
       }
-      
+
       return issues;
     }
   },
@@ -200,7 +224,11 @@ export const COMPONENT_RULES = {
     severity: COMPONENT_SEVERITY.INFO,
     validate: (content) => {
       const issues = [];
-      
+
+      if (isNextServerOnlyComponent(content)) {
+        return issues;
+      }
+
       if (!content.includes('memo') && !content.includes('React.memo')) {
         issues.push({
           rule: 'memo-usage',
@@ -209,7 +237,7 @@ export const COMPONENT_RULES = {
           severity: COMPONENT_SEVERITY.INFO
         });
       }
-      
+
       return issues;
     }
   },
@@ -223,9 +251,13 @@ export const COMPONENT_RULES = {
     severity: COMPONENT_SEVERITY.INFO,
     validate: (content, componentName) => {
       const issues = [];
-      
+
+      if (isNextServerOnlyComponent(content)) {
+        return issues;
+      }
+
       const hookPattern = new RegExp(`use${componentName}`);
-      
+
       if (!hookPattern.test(content)) {
         issues.push({
           rule: 'composable-hook-pattern',
@@ -234,7 +266,7 @@ export const COMPONENT_RULES = {
           severity: COMPONENT_SEVERITY.INFO
         });
       }
-      
+
       return issues;
     }
   },
@@ -248,13 +280,14 @@ export const COMPONENT_RULES = {
     severity: COMPONENT_SEVERITY.INFO,
     validate: (content) => {
       const issues = [];
-      
-      // Check for ThemeNaming import or usage
+
+      if (isNextServerOnlyComponent(content)) {
+        return issues;
+      }
+
       const hasThemeNaming = /ThemeNaming\./.test(content) || /themeNaming\./.test(content);
-      
-      // Check for variantClass, sizeClass, stateClass patterns
       const hasVariantPattern = /(variant|size|state)Class/.test(content);
-      
+
       if (!hasThemeNaming && !hasVariantPattern) {
         issues.push({
           rule: 'theme-naming-usage',
@@ -263,7 +296,7 @@ export const COMPONENT_RULES = {
           severity: COMPONENT_SEVERITY.INFO
         });
       }
-      
+
       return issues;
     }
   }
@@ -339,10 +372,8 @@ export class ComponentValidator {
         const issues = rule.validate(content, componentName);
         
         if (issues.length > 0) {
-          results.valid = false;
           results.issues.push(...issues);
-          
-          // Update summary
+
           for (const issue of issues) {
             if (issue.severity === COMPONENT_SEVERITY.ERROR) {
               results.summary.errors++;
@@ -363,6 +394,8 @@ export class ComponentValidator {
       }
     }
 
+    results.valid = results.summary.errors === 0;
+
     return results;
   }
 

package/scripts/cli/internal/generator.js

@@ -7,6 +7,7 @@ import { readFile } from 'fs/promises';
 import { existsSync } from 'fs';
 import { join } from 'path';
 import { templateEngine, COMPLEXITY_LEVELS } from './template-engine.js';
+import { resolveEffectiveComplexity } from './complexity-utils.js';
 import { detectFramework } from '../utils/detector.js';
 import { filesystem } from './filesystem.js';
 import { aiEngine } from './ai-engine.js';
@@ -21,6 +22,7 @@ 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';
+import { configLoader } from './config-loader.js';
 
 export { COMPLEXITY_LEVELS };
 
@@ -33,8 +35,23 @@ 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
+// Global rate limiter for AI operations - initialized with defaults, will be updated from config
+let aiRateLimiter = new RateLimiter(5, 60000); // 5 requests per minute default
+
+/**
+ * Initialize rate limiter from config
+ */
+async function initializeRateLimiter() {
+  const config = configLoader.get('ai') || {};
+  const rateLimitConfig = config.rateLimit;
+  
+  if (rateLimitConfig) {
+    aiRateLimiter = new RateLimiter(
+      rateLimitConfig.requests || 5,
+      rateLimitConfig.windowMs || 60000
+    );
+  }
+}
 
 export const generator = {
   /**
@@ -47,9 +64,13 @@ export const generator = {
   async generateComponent(name, options = {}) {
     const {
       outputPath,
-      complexity = 'medium',
+      complexity: complexityInput,
       features = [],
-      logger
+      logger,
+      framework: frameworkOverride,
+      prefix: designTokenPrefix = 'atomix',
+      storybookCssImport,
+      hookOutputDir
     } = options;
 
     // Sanitize and validate component name
@@ -67,10 +88,12 @@ export const generator = {
       );
     }
 
+    const projectRoot = process.cwd();
+
     // Detect framework
     let framework;
     try {
-      framework = await detectFramework();
+      framework = await detectFramework(projectRoot, { framework: frameworkOverride });
       if (logger) logger.debug(`Detected framework: ${framework}`);
     } catch (error) {
       throw new AtomixCLIError(
@@ -84,6 +107,8 @@ export const generator = {
       );
     }
 
+    const complexity = resolveEffectiveComplexity(framework, complexityInput);
+
     // Load design tokens if available
     let availableTokens = {};
     try {
@@ -94,7 +119,7 @@ export const generator = {
       ];
       
       for (const tokenPath of tokenPaths) {
-        if (existsSync(join(process.cwd(), tokenPath))) {
+        if (existsSync(join(projectRoot, tokenPath))) {
           availableTokens = await tokenProvider.loadTokens(tokenPath);
           if (logger) logger.debug(`Loaded design tokens from ${tokenPath}`);
           break;
@@ -171,7 +196,9 @@ export const generator = {
     if (features.includes('storybook')) {
       try {
         const storyTemplateFn = templateEngine.selectTemplate(framework, complexity, 'story');
-        const storyContent = templateEngine.render(storyTemplateFn, sanitizedName);
+        const storyContent = templateEngine.render(storyTemplateFn, sanitizedName, {
+          storybookCssImport
+        });
         await filesystem.writeFile(join(componentPath, `${sanitizedName}.stories.tsx`), storyContent, 'utf8');
         if (logger) logger.debug(`Created ${sanitizedName}.stories.tsx`);
       } catch (error) {
@@ -206,31 +233,12 @@ export const generator = {
       }
     }
 
-    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) - Enhanced with auto-generation
     if (features.includes('styles')) {
       try {
-        const stylesResult = await generateComponentStylesPackage(sanitizedName, process.cwd(), {
-          force: options.force || false
+        const stylesResult = await generateComponentStylesPackage(sanitizedName, projectRoot, {
+          force: options.force || false,
+          prefix: designTokenPrefix
         });
         
         if (logger && stylesResult.created.length > 0) {
@@ -249,11 +257,12 @@ export const generator = {
       }
     }
 
-    // 5. Composable Hook - Enhanced generation
+    // 5. Composable hook (single path: lib/composables + barrel updates)
     if (features.includes('hook') && framework !== 'vanilla') {
       try {
-        const hookResult = await generateHookFile(sanitizedName, process.cwd(), {
-          force: options.force || false
+        const hookResult = await generateHookFile(sanitizedName, projectRoot, {
+          force: options.force || false,
+          outputDir: hookOutputDir || 'src/lib/composables'
         });
         
         if (logger && hookResult.created.length > 0) {
@@ -279,12 +288,15 @@ export const generator = {
    * Generates component files using AI based on a prompt
    * @param {string} name - Component name
    * @param {string} prompt - AI prompt
-   * @param {Object} options - Generation options
+   * @param {Object} options - Generation options (aiProvider, aiModel, aiTemperature, aiMaxTokens, aiPreview)
    * @returns {Promise<string>} Path to generated component
    * @throws {AtomixCLIError} If generation fails
    */
   async generateAIComponent(name, prompt, options = {}) {
-    const { outputPath, logger } = options;
+    const { outputPath, logger, aiProvider, aiModel, aiTemperature, aiMaxTokens, aiPreview } = options;
+    
+    // Initialize rate limiter from config
+    await initializeRateLimiter();
     
     // Apply rate limiting for AI operations
     const userId = process.env.USER || 'anonymous';
@@ -319,10 +331,15 @@ export const generator = {
 
     const componentPath = join(outputPath, sanitizedName);
 
-    // Call AI Engine
+    // Call AI Engine with override options
     let generated;
     try {
-      generated = await aiEngine.generateComponent(name, prompt);
+      generated = await aiEngine.generateComponent(name, prompt, {
+        provider: aiProvider,
+        model: aiModel,
+        temperature: aiTemperature,
+        maxTokens: aiMaxTokens
+      });
     } catch (error) {
       throw new AtomixCLIError(
         `AI generation failed: ${error.message}`,
@@ -336,6 +353,42 @@ export const generator = {
       );
     }
 
+    // Preview mode: show output without writing files
+    if (aiPreview) {
+      logger.info('\n' + '='.repeat(60));
+      logger.info('📝 AI PREVIEW MODE - Generated content will not be saved');
+      logger.info('='.repeat(60));
+      
+      logger.info('\n📄 Component File:');
+      logger.info(generated.component || 'No component generated');
+      
+      if (generated.styles) {
+        logger.info('\n🎨 Styles File:');
+        logger.info(generated.styles);
+      }
+      
+      if (generated.tests) {
+        logger.info('\n🧪 Test File:');
+        logger.info(generated.tests);
+      }
+      
+      if (generated.stories) {
+        logger.info('\n📚 Stories File:');
+        logger.info(generated.stories);
+      }
+      
+      if (generated.readme) {
+        logger.info('\n📖 README:');
+        logger.info(generated.readme);
+      }
+      
+      logger.info('\n' + '='.repeat(60));
+      logger.info('Preview complete. Run without --ai-preview to save files.');
+      logger.info('='.repeat(60));
+      
+      return componentPath; // Return path without writing
+    }
+
     // Write component file
     try {
       await filesystem.writeFile(join(componentPath, `${sanitizedName}.tsx`), generated.component, 'utf8');

package/scripts/cli/internal/hook-generator.js

@@ -334,8 +334,11 @@ export async function generateHookFile(componentName, projectRoot, options = {})
         await filesystem.writeFile(indexFile, updatedContent, 'utf8');
       }
     } else {
-      // Create new index
-      const indexContent = generateComposablesIndex();
+      const indexContent = `/**
+ * Composable hooks (Atomix CLI)
+ */
+export { ${hookName} } from './${hookName}';
+`;
       await filesystem.writeFile(indexFile, indexContent, 'utf8');
       created.push(`${outputDir}/index.ts`);
     }

package/scripts/cli/internal/itcss-generator.js

@@ -63,10 +63,11 @@ export const ITCSS_LAYERS = {
  * Generate SCSS settings file for a component
  */
 export function generateSettingsFile(componentName, options = {}) {
+  const dsPrefix = options.prefix || 'atomix';
   const { 
-    primaryColor = '--atomix-color-primary',
-    spacingBase = '--atomix-spacing-4',
-    radiusBase = '--atomix-radius-md'
+    primaryColor = `--${dsPrefix}-color-primary`,
+    spacingBase = `--${dsPrefix}-spacing-4`,
+    radiusBase = `--${dsPrefix}-radius-md`
   } = options;
   
   const componentPrefix = componentName.toLowerCase().replace(/([A-Z])/g, '-$1').replace(/^-/, '');
@@ -97,19 +98,19 @@ export function generateSettingsFile(componentName, options = {}) {
   --${componentPrefix}-radius: var(${radiusBase});
   
   // Typography
-  --${componentPrefix}-font-size: var(--atomix-font-size-base);
-  --${componentPrefix}-font-weight: var(--atomix-font-weight-medium);
-  --${componentPrefix}-line-height: var(--atomix-line-height-tight);
+  --${componentPrefix}-font-size: var(--${dsPrefix}-font-size-base);
+  --${componentPrefix}-font-weight: var(--${dsPrefix}-font-weight-medium);
+  --${componentPrefix}-line-height: var(--${dsPrefix}-line-height-tight);
   
   // States
   --${componentPrefix}-disabled-opacity: 0.5;
-  --${componentPrefix}-focus-ring: 0 0 0 2px var(--atomix-color-primary-200);
+  --${componentPrefix}-focus-ring: 0 0 0 2px var(--${dsPrefix}-color-primary-200);
 }
 
 // Dark mode overrides
 .dark {
   :root {
-    --${componentPrefix}-focus-ring: 0 0 0 2px var(--atomix-color-primary-800);
+    --${componentPrefix}-focus-ring: 0 0 0 2px var(--${dsPrefix}-color-primary-800);
   }
 }
 
@@ -131,6 +132,7 @@ $${componentPrefix}-config: (
  * Generate SCSS component styles file
  */
 export function generateComponentStyles(componentName, options = {}) {
+  const dsPrefix = options.prefix || 'atomix';
   const { 
     baseClass = `c-${componentName.toLowerCase().replace(/([A-Z])/g, '-$1').replace(/^-/, '')}`,
     hasVariants = true,
@@ -141,7 +143,7 @@ export function generateComponentStyles(componentName, options = {}) {
   
   const componentPrefix = componentName.toLowerCase().replace(/([A-Z])/g, '-$1').replace(/^-/, '');
   
-  return `// ${componentName} Component Styles
+  const scss = `// ${componentName} Component Styles
 // Generated by Atomix CLI
 // ITCSS Layer: Components
 // =============================================================================
@@ -354,6 +356,7 @@ export function generateComponentStyles(componentName, options = {}) {
   }
 }
 `;
+  return scss.replaceAll('--atomix-', `--${dsPrefix}-`);
 }
 
 /**
@@ -483,7 +486,8 @@ export async function generateComponentStylesPackage(componentName, projectRoot,
   const {
     skipSettings = false,
     skipComponents = false,
-    force = false
+    force = false,
+    prefix = 'atomix'
   } = options;
   
   const created = [];
@@ -498,7 +502,7 @@ export async function generateComponentStylesPackage(componentName, projectRoot,
       const settingsFile = join(settingsPath, `_settings.${componentPrefix}.scss`);
       
       if (force || !existsSync(settingsFile)) {
-        const settingsContent = generateSettingsFile(componentName);
+        const settingsContent = generateSettingsFile(componentName, { prefix });
         await filesystem.writeFile(settingsFile, settingsContent, 'utf8');
         created.push(`src/styles/01-settings/_settings.${componentPrefix}.scss`);
         logger.debug(`Created settings file: ${settingsFile}`);
@@ -513,7 +517,7 @@ export async function generateComponentStylesPackage(componentName, projectRoot,
       const componentFile = join(componentsPath, `_components.${componentPrefix}.scss`);
       
       if (force || !existsSync(componentFile)) {
-        const componentContent = generateComponentStyles(componentName);
+        const componentContent = generateComponentStyles(componentName, { prefix });
         await filesystem.writeFile(componentFile, componentContent, 'utf8');
         created.push(`src/styles/06-components/_components.${componentPrefix}.scss`);
         logger.debug(`Created component styles: ${componentFile}`);