@shohojdhara/atomix 0.5.1 → 0.5.2

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

package/scripts/cli/templates/next-templates.js

@@ -3,22 +3,40 @@
  * Optimized for Server Components and App Router
  */
 
+/**
+ * Simple Server Component — valid displayName, Props, JSDoc, a11y; no forwardRef (server).
+ */
 export const nextTemplates = {
-  /**
-   * Simple Server Component
-   */
-  simple: (name) => `/**
- * ${name} Component (Server Component)
+  simple: (name) => `import React from 'react';
+
+export interface ${name}Props {
+  /** Optional heading override */
+  title?: string;
+  children?: React.ReactNode;
+}
+
+/**
+ * ${name} — presentational server component (Atomix scaffold).
+ *
+ * @param props - ${name} properties
  */
-import React from 'react';
+export default function ${name}(props: ${name}Props) {
+  const { title = '${name}', children } = props;
 
-export default function ${name}() {
   return (
-    <div className="${name.toLowerCase()}">
-      <h1>${name} Component</h1>
-    </div>
+    <section
+      className={\`c-${name.toLowerCase()}\`}
+      role="region"
+      aria-label={title}
+      data-testid="${name.toLowerCase()}-root"
+    >
+      <h1 className={\`c-${name.toLowerCase()}__title\`}>{title}</h1>
+      {children}
+    </section>
   );
 }
+
+${name}.displayName = '${name}';
 `,
 
   /**
@@ -26,47 +44,80 @@ export default function ${name}() {
    */
   client: (name) => `'use client';
 
+import React, { forwardRef, useState } from 'react';
+
+export interface ${name}Props {
+  title?: string;
+  children?: React.ReactNode;
+  className?: string;
+}
+
 /**
- * ${name} Component (Client Component)
+ * ${name} — client component with local state (Atomix scaffold).
  */
-import React, { useState } from 'react';
-
-export default function ${name}() {
+const ${name}Inner = forwardRef<HTMLDivElement, ${name}Props>(function ${name}Inner(
+  { title = '${name}', children, className = '' },
+  ref
+) {
   const [active, setActive] = useState(false);
 
   return (
-    <div className="${name.toLowerCase()}">
-      <h1>${name} Component</h1>
-      <button onClick={() => setActive(!active)}>
+    <section
+      ref={ref}
+      className={[\`c-${name.toLowerCase()}\`, className].filter(Boolean).join(' ')}
+      role="region"
+      aria-label={title}
+      data-testid="${name.toLowerCase()}-root"
+    >
+      <h1 className={\`c-${name.toLowerCase()}__title\`}>{title}</h1>
+      {children}
+      <button type="button" onClick={() => setActive(!active)} aria-pressed={active}>
         Toggle: {active ? 'On' : 'Off'}
       </button>
-    </div>
+    </section>
   );
-}
+});
+
+${name}Inner.displayName = '${name}';
+
+export default ${name}Inner;
 `,
 
   /**
    * Complex Server Component with async data
    */
-  complex: (name) => `/**
- * ${name} Component (Server Component with Data)
- */
-import React from 'react';
+  complex: (name) => `import React from 'react';
 
-async function getData() {
-  // Simulating data fetch
+export interface ${name}Props {
+  title?: string;
+}
+
+async function getData(): Promise<{ title: string }> {
   return { title: '${name}' };
 }
 
-export default async function ${name}() {
+/**
+ * ${name} — async server component (Atomix scaffold).
+ */
+async function ${name}(props: ${name}Props) {
   const data = await getData();
+  const title = props.title ?? data.title;
 
   return (
-    <div className="${name.toLowerCase()}">
-      <h1>{data.title}</h1>
-      <p>This is a complex Next.js server component.</p>
-    </div>
+    <section
+      className={\`c-${name.toLowerCase()}\`}
+      role="region"
+      aria-label={title}
+      data-testid="${name.toLowerCase()}-root"
+    >
+      <h1>{title}</h1>
+      <p>This is a complex Next.js server component scaffold.</p>
+    </section>
   );
 }
+
+${name}.displayName = '${name}';
+
+export default ${name};
 `
 };

package/scripts/cli/templates/storybook-templates.js

@@ -5,8 +5,13 @@
 
 /**
  * Basic Storybook story template
+ * @param {string} name - Component name
+ * @param {{ storybookCssImport?: string }} [opts]
  */
-export const basicStoryTemplate = (name) => `import type { Meta, StoryObj } from '@storybook/react';
+export const basicStoryTemplate = (name, opts = {}) => {
+  const cssImport = opts.storybookCssImport || '@shohojdhara/atomix/scss';
+  return `import '${cssImport}';
+import type { Meta, StoryObj } from '@storybook/react';
 import { ${name} } from './${name}';
 
 const meta: Meta<typeof ${name}> = {
@@ -66,11 +71,15 @@ export const Glass: Story = {
   },
 };
 `;
+};
 
 /**
  * Enhanced Storybook story template with detailed documentation
  */
-export const enhancedStoryTemplate = (name) => `import type { Meta, StoryObj } from '@storybook/react';
+export const enhancedStoryTemplate = (name, opts = {}) => {
+  const cssImport = opts.storybookCssImport || '@shohojdhara/atomix/scss';
+  return `import '${cssImport}';
+import type { Meta, StoryObj } from '@storybook/react';
 import { ${name} } from './${name}';
 
 const meta: Meta<typeof ${name}> = {
@@ -226,6 +235,7 @@ export const CustomContent: Story = {
   },
 };
 `;
+};
 
 /**
  * Storybook templates object