@shohojdhara/atomix 0.5.1 → 0.5.4

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/config-loader.js

@@ -1,6 +1,6 @@
 /**
  * Atomix CLI Configuration Loader
- * Supports loading atomix.config.ts and atomix.config.js
+ * Supports loading atomix.config.ts, atomix.config.js and atomix.config.json
  */
 
 import { existsSync } from 'fs';
@@ -9,7 +9,7 @@ import { pathToFileURL } from 'url';
 import { logger } from '../utils/logger.js';
 import { hookManager } from './hooks.js';
 
-export class ConfigLoader {
+class ConfigLoader {
   constructor() {
     this.config = null;
     this.configPath = null;
@@ -23,7 +23,11 @@ export class ConfigLoader {
   async load(projectRoot = process.cwd()) {
     if (this.config) return this.config;
 
-    const configFiles = ['atomix.config.ts', 'atomix.config.js'];
+    const configFiles = [
+      'atomix.config.ts',
+      'atomix.config.js', 
+      'atomix.config.json'
+    ];
     let foundFile = null;
 
     for (const file of configFiles) {
@@ -43,23 +47,29 @@ export class ConfigLoader {
     this.configPath = foundFile;
 
     try {
-      // If it's a TypeScript file, we need to register ts-node
-      if (foundFile.endsWith('.ts')) {
-        // Dynamic import to avoid issues in pure JS environments
-        const { register } = await import('ts-node');
-        register({
-          transpileOnly: true,
-          esm: true,
-          compilerOptions: {
-            module: 'ESNext',
-            target: 'ESNext'
-          }
-        });
-      }
+      // Handle JSON files differently from JS/TS files
+      if (foundFile.endsWith('.json')) {
+        const fs = await import('fs');
+        this.config = JSON.parse(fs.readFileSync(foundFile, 'utf8'));
+      } else {
+        // If it's a TypeScript file, we need to register ts-node
+        if (foundFile.endsWith('.ts')) {
+          // Dynamic import to avoid issues in pure JS environments
+          const { register } = await import('ts-node');
+          register({
+            transpileOnly: true,
+            esm: true,
+            compilerOptions: {
+              module: 'ESNext',
+              target: 'ESNext'
+            }
+          });
+        }
 
-      // Use dynamic import for ESM compatibility
-      const configModule = await import(pathToFileURL(foundFile).href);
-      this.config = configModule.default || configModule;
+        // Use dynamic import for ESM compatibility
+        const configModule = await import(pathToFileURL(foundFile).href);
+        this.config = configModule.default || configModule;
+      }
 
       logger.debug(`Loaded configuration from ${foundFile}`);
 
@@ -159,4 +169,4 @@ export class ConfigLoader {
   }
 }
 
-export const configLoader = new ConfigLoader();
+export const configLoader = new ConfigLoader();

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}`);