@shohojdhara/atomix 0.5.1 → 0.5.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@shohojdhara/atomix",
-  "version": "0.5.1",
+  "version": "0.5.4",
   "description": "Atomix Design System - A modern component library for web applications",
   "type": "module",
   "sideEffects": [
@@ -19,7 +19,7 @@
   "jsdelivr": "dist/atomix.umd.min.js",
   "browser": "dist/atomix.umd.min.js",
   "bin": {
-    "atomix": "./scripts/atomix-cli.js"
+    "atomix": "scripts/atomix-cli.js"
   },
   "exports": {
     ".": {
@@ -125,6 +125,11 @@
       "require": "./build-tools/index.js",
       "default": "./build-tools/index.js"
     },
+    "./config": {
+      "types": "./dist/config.d.ts",
+      "import": "./dist/config.js",
+      "default": "./dist/config.js"
+    },
     "./package.json": "./package.json"
   },
   "dependencies": {
@@ -180,8 +185,8 @@
     "@testing-library/react": "^14.0.0",
     "@testing-library/user-event": "^14.0.0",
     "@types/node": "^20.0.0",
-    "@types/react": "^18.0.0",
-    "@types/react-dom": "^18.0.0",
+    "@types/react": "^19.0.0",
+    "@types/react-dom": "^19.0.0",
     "@typescript-eslint/eslint-plugin": "^6.0.0",
     "@typescript-eslint/parser": "^6.0.0",
     "@vitejs/plugin-react": "^4.0.0",
@@ -202,8 +207,8 @@
     "postcss-import": "^15.0.0",
     "postcss-preset-env": "^9.0.0",
     "prettier": "^3.0.0",
-    "react": "^18.0.0",
-    "react-dom": "^18.0.0",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
     "rimraf": "^5.0.0",
     "rollup": "^3.0.0",
     "rollup-plugin-dts": "^6.0.0",
@@ -216,7 +221,7 @@
     "ts-node": "^10.9.0",
     "tslib": "^2.6.0",
     "tsx": "^4.21.0",
-    "typescript": "^5.0.0",
+    "typescript": "^6.0.2",
     "vite": "^4.0.0",
     "vitest": "^0.34.0"
   },
@@ -305,8 +310,8 @@
   "homepage": "https://github.com/Shohojdhara/atomix#readme",
   "peerDependencies": {
     "@phosphor-icons/react": "2.1.10",
-    "react": "^18.0.0",
-    "react-dom": "^18.0.0"
+    "react": ">=18.0.0",
+    "react-dom": ">=18.0.0"
   },
   "engines": {
     "node": ">=18.0.0",

package/scripts/atomix-cli.js

@@ -137,8 +137,22 @@ program
   .option('-i, --interactive', 'Interactive mode', false)
   .option('-p, --path <path>', 'Output path', './src/components')
   .option('--prompt <prompt>', 'AI prompt for generating component')
-  .option('--complexity <level>', 'Complexity (simple|medium|complex)', 'medium')
+  .option('--ai-provider <provider>', 'AI provider override (openai|anthropic)')
+  .option('--ai-model <model>', 'AI model override')
+  .option('--ai-temperature <temp>', 'AI creativity level 0.0-1.0', parseFloat, 0.7)
+  .option('--ai-preview', 'Preview AI output before writing files', false)
+  .option('--ai-max-tokens <tokens>', 'Maximum tokens for AI response', parseInt, 4000)
+  .option(
+    '--complexity <level>',
+    'Template complexity (React: simple|medium|complex; Next: simple|client|complex). Default is framework-specific.'
+  )
+  .option('--framework <name>', 'Force framework: react, next, or vanilla (skips detection)')
+  .option('--storybook', 'Generate Storybook story', true)
+  .option('--hook', 'Generate composable hook', true)
+  .option('--styles', 'Generate ITCSS styles', true)
+  .option('--tests', 'Generate unit test file', false)
   .option('--validate', 'Validate after generation', true)
+  .option('--skip-validate', 'Skip validation after generation', false)
   .action(async (type, name, options) => {
     try {
       await generateAction(type, name, options);

package/scripts/cli/__tests__/complexity-utils.test.js

@@ -0,0 +1,24 @@
+import { describe, it, expect } from 'vitest';
+import {
+  resolveDefaultComplexity,
+  normalizeComplexityForFramework,
+  resolveEffectiveComplexity
+} from '../internal/complexity-utils.js';
+
+describe('complexity-utils', () => {
+  it('resolveDefaultComplexity: next is simple, react is medium', () => {
+    expect(resolveDefaultComplexity('next')).toBe('simple');
+    expect(resolveDefaultComplexity('react')).toBe('medium');
+    expect(resolveDefaultComplexity('vanilla')).toBe('medium');
+  });
+
+  it('normalizeComplexityForFramework maps next+medium to simple', () => {
+    expect(normalizeComplexityForFramework('next', 'medium')).toBe('simple');
+    expect(normalizeComplexityForFramework('next', 'client')).toBe('client');
+  });
+
+  it('resolveEffectiveComplexity uses explicit CLI value when set', () => {
+    expect(resolveEffectiveComplexity('react', 'simple')).toBe('simple');
+    expect(resolveEffectiveComplexity('next', undefined)).toBe('simple');
+  });
+});

package/scripts/cli/__tests__/detector.test.js

@@ -0,0 +1,50 @@
+import { describe, it, expect, beforeEach, afterEach } from 'vitest';
+import { mkdtempSync, writeFileSync, rmSync } from 'fs';
+import { join } from 'path';
+import { tmpdir } from 'os';
+import { detectFramework } from '../utils/detector.js';
+
+function writePackage(root, deps = {}, devDeps = {}) {
+  writeFileSync(
+    join(root, 'package.json'),
+    JSON.stringify({ name: 'fixture', dependencies: deps, devDependencies: devDeps }, null, 2)
+  );
+}
+
+describe('detectFramework', () => {
+  let dir;
+
+  beforeEach(() => {
+    dir = mkdtempSync(join(tmpdir(), 'atomix-det-'));
+  });
+
+  afterEach(() => {
+    rmSync(dir, { recursive: true, force: true });
+  });
+
+  it('returns vanilla without package.json', async () => {
+    expect(await detectFramework(join(dir, 'empty'))).toBe('vanilla');
+  });
+
+  it('next dependency wins over react', async () => {
+    writePackage(dir, { react: '^18', next: '^14' });
+    expect(await detectFramework(dir)).toBe('next');
+  });
+
+  it('vite + react is react (not next) when next.config absent', async () => {
+    writePackage(dir, { react: '^18', vite: '^5' });
+    writeFileSync(join(dir, 'vite.config.ts'), 'export default {}');
+    expect(await detectFramework(dir)).toBe('react');
+  });
+
+  it('next.config.ts implies next without next in deps', async () => {
+    writePackage(dir, { react: '^18' });
+    writeFileSync(join(dir, 'next.config.ts'), 'export default {}');
+    expect(await detectFramework(dir)).toBe('next');
+  });
+
+  it('respects framework override', async () => {
+    writePackage(dir, { react: '^18', next: '^14' });
+    expect(await detectFramework(dir, { framework: 'react' })).toBe('react');
+  });
+});

package/scripts/cli/__tests__/template-engine.test.js

@@ -0,0 +1,23 @@
+import { describe, it, expect } from 'vitest';
+import { templateEngine } from '../internal/template-engine.js';
+
+describe('templateEngine.selectTemplate', () => {
+  it('resolves react × medium × component', () => {
+    const fn = templateEngine.selectTemplate('react', 'medium', 'component');
+    expect(typeof fn).toBe('function');
+  });
+
+  it('resolves next × simple × component', () => {
+    const fn = templateEngine.selectTemplate('next', 'simple', 'component');
+    expect(typeof fn).toBe('function');
+  });
+
+  it('throws for next × medium', () => {
+    expect(() => templateEngine.selectTemplate('next', 'medium', 'component')).toThrow();
+  });
+
+  it('resolves vanilla component without complexity validation', () => {
+    const fn = templateEngine.selectTemplate('vanilla', 'anything', 'component');
+    expect(typeof fn).toBe('function');
+  });
+});

package/scripts/cli/__tests__/test-setup.js

@@ -0,0 +1,3 @@
+/**
+ * CLI test setup (node environment)
+ */

package/scripts/cli/commands/doctor.js

@@ -4,7 +4,15 @@
  */
 
 import { logger } from '../utils/logger.js';
-import { checkRuntimes, checkProjectStructure, checkConfig, checkPermissions, checkPlugins, checkTokens } from '../utils/diagnostics.js';
+import {
+  checkRuntimes,
+  checkProjectStructure,
+  checkConfig,
+  checkPermissions,
+  checkPlugins,
+  checkTokens,
+  checkGenerator
+} from '../utils/diagnostics.js';
 import chalk from 'chalk';
 
 /** Short descriptions for each doctor check (for --explain) */
@@ -19,7 +27,10 @@ const DOCTOR_CHECK_DESCRIPTIONS = {
   'Permissions: .': 'Read/write access to project root.',
   'Permissions: src': 'Read/write access to src directory.',
   'Plugins': 'Reports plugins registered in atomix.config.',
-  'Tokens': 'Design token discovery: src/styles/01-settings/_settings.*.scss (optional).'
+  'Tokens': 'Design token discovery: src/styles/01-settings/_settings.*.scss (optional).',
+  'Generator: output path': 'Writable directory for atomix generate (from config or ./src/components).',
+  'Storybook (optional)': 'Detects Storybook-related dependencies for generated stories.',
+  'Generator: template registry': 'Ensures CLI template engine exposes react, next, and vanilla.'
 };
 
 /**
@@ -46,6 +57,7 @@ export async function doctorAction(options = {}) {
     const permissions = await checkPermissions();
     const plugins = await checkPlugins();
     const tokens = await checkTokens();
+    const generator = await checkGenerator();
 
     spinner.stop();
 
@@ -55,7 +67,7 @@ export async function doctorAction(options = {}) {
       margin: 1
     });
 
-    const allResults = [...runtimes, ...structure, ...config, ...permissions, ...plugins, ...tokens];
+    const allResults = [...runtimes, ...structure, ...config, ...permissions, ...plugins, ...tokens, ...generator];
     let issuesFound = false;
 
     for (const result of allResults) {

package/scripts/cli/commands/generate.js

@@ -11,6 +11,45 @@ import { filesystem } from '../internal/filesystem.js';
 import { validateComponentName } from '../utils/validation.js';
 import { hookManager } from '../internal/hooks.js';
 import { validateComponent } from '../internal/validator.js';
+import { configLoader } from '../internal/config-loader.js';
+import { detectFramework } from '../utils/detector.js';
+import { resolveDefaultComplexity } from '../internal/complexity-utils.js';
+import { telemetry } from '../utils/telemetry.js';
+
+/**
+ * Merge CLI options with atomix.config generator section (CLI wins).
+ * @param {Object} options - Commander options
+ * @returns {Promise<Object>}
+ */
+async function buildGenerateConfig(name, options) {
+  const cwd = process.cwd();
+  const loaded = await configLoader.load(cwd);
+  const gen = loaded.generator || {};
+
+  const outputPath = options.path ?? gen.outputPath ?? './src/components';
+  const framework = options.framework ?? gen.framework;
+  const prefix = loaded.prefix ?? 'atomix';
+  const storybookCssImport = gen.storybookCssImport;
+  const hookOutputDir = gen.hookOutputDir;
+
+  const complexity =
+    options.complexity !== undefined && options.complexity !== null && options.complexity !== ''
+      ? options.complexity
+      : undefined;
+
+  const features = determineFeatures(options, gen.features || {});
+
+  return {
+    name,
+    complexity,
+    features,
+    outputPath,
+    framework,
+    prefix,
+    storybookCssImport,
+    hookOutputDir
+  };
+}
 
 /**
  * Action logic for generating components
@@ -19,16 +58,18 @@ import { validateComponent } from '../internal/validator.js';
  * @param {Object} options - CLI options
  */
 export async function generateAction(type, name, options) {
-  let config = {
-    name,
-    complexity: options.complexity || 'medium',
-    features: determineFeatures(options),
-    outputPath: options.path || './src/components'
-  };
+  let config = await buildGenerateConfig(name, options);
 
   if (options.interactive) {
-    config = await promptInteractive();
-    if (!config) return;
+    const interactive = await promptInteractive();
+    if (!interactive) return;
+    config = {
+      ...config,
+      ...interactive,
+      name: interactive.name,
+      complexity: interactive.complexity,
+      features: interactive.features
+    };
   }
 
   // Pre-generation hook
@@ -49,7 +90,6 @@ export async function generateAction(type, name, options) {
   const spinner = logger.spinner(`Generating ${type}: ${config.name}...`).start();
 
   try {
-    // Validation
     const nameValidation = await validateComponentName(config.name);
     if (!nameValidation.isValid) {
       throw new AtomixCLIError(
@@ -76,12 +116,23 @@ export async function generateAction(type, name, options) {
       );
     }
 
-    // Execution
+    const detectedFw = await detectFramework(process.cwd(), { framework: config.framework });
+    telemetry.recordExtra({
+      generateType: type,
+      framework: detectedFw,
+      componentName: config.name
+    });
+
     let path;
     if (options.prompt) {
       path = await generator.generateAIComponent(config.name, options.prompt, {
         ...config,
-        logger: { debug: (msg) => logger.debug(msg) }
+        logger: { debug: (msg) => logger.debug(msg) },
+        aiProvider: options.aiProvider,
+        aiModel: options.aiModel,
+        aiTemperature: options.aiTemperature,
+        aiPreview: options.aiPreview,
+        aiMaxTokens: options.aiMaxTokens
       });
     } else {
       path = await generator.generateComponent(config.name, {
@@ -92,9 +143,8 @@ export async function generateAction(type, name, options) {
 
     spinner.succeed(`Generated component ${config.name} at ${path}`);
 
-    if (options.validate) {
+    if (!options.skipValidate && options.validate !== false) {
       let report = await generator.validate(config.name, path);
-      // Component-scoped A11y and token validation (Phase 2: design system creator)
       if (type === 'component') {
         const componentReport = await validateComponent(config.name, process.cwd());
         const componentIssues = componentReport.issues.map(
@@ -104,7 +154,6 @@ export async function generateAction(type, name, options) {
         report.valid = report.valid && componentReport.valid;
       }
 
-      // Validation hook
       try {
         report = await hookManager.trigger('onValidate', report);
       } catch (error) {
@@ -117,7 +166,6 @@ export async function generateAction(type, name, options) {
       }
     }
 
-    // Post-build hook (using generated path as asset)
     try {
       await hookManager.trigger('postBuild', [path]);
     } catch (error) {
@@ -125,11 +173,9 @@ export async function generateAction(type, name, options) {
     }
 
     logger.box(`🎉 Component ${config.name} ready!\nRun: atomix validate component ${config.name}`);
-
   } catch (error) {
     spinner.fail('Generation failed');
-    
-    // Enhance error context for known error types
+
     if (error.code === 'TEMPLATE_NOT_FOUND') {
       error.suggestions.push('Run `atomix doctor` to check template availability');
     } else if (error.code === 'FRAMEWORK_DETECTION_FAILED') {
@@ -137,48 +183,62 @@ export async function generateAction(type, name, options) {
     } else if (error.code === 'FILE_WRITE_FAILED') {
       error.suggestions.push('Check disk space and file permissions');
     }
-    
+
     throw error;
   }
 }
 
 /**
- * Determine which features to enable based on CLI options
  * @param {Object} options - CLI options
- * @returns {string[]} Array of feature names
+ * @param {Object} genFeatures - config.generator.features
  */
-function determineFeatures(options) {
+function determineFeatures(options, genFeatures = {}) {
+  let storybook = genFeatures.storybook !== false;
+  let hook = genFeatures.hook !== false;
+  let styles = genFeatures.styles !== false;
+  let tests = genFeatures.tests === true;
+
+  if (options.storybook === false) storybook = false;
+  if (options.hook === false) hook = false;
+  if (options.styles === false) styles = false;
+  if (options.tests) tests = true;
+
   const features = [];
-  
-  // Default features (always enabled unless explicitly disabled)
-  if (options.storybook !== false) {
-    features.push('storybook');
-  }
-  
-  if (options.hook !== false) {
-    features.push('hook');
-  }
-  
-  if (options.styles !== false) {
-    features.push('styles');
-  }
-  
-  // Optional features (enabled by flag)
-  if (options.tests === true) {
-    features.push('tests');
-  }
-  
+  if (storybook) features.push('storybook');
+  if (hook) features.push('hook');
+  if (styles) features.push('styles');
+  if (tests) features.push('tests');
+
   return features;
 }
 
 /**
  * Interactive mode handler
- * Prompts user for component configuration
  * @returns {Promise<Object>} Configuration object
  */
 async function promptInteractive() {
   logger.info('🎨 Interactive Component Generator');
-  
+
+  const cwd = process.cwd();
+  const loaded = await configLoader.load(cwd);
+  const gen = loaded.generator || {};
+
+  const framework = await detectFramework(cwd, {});
+  const defaultComplexity = resolveDefaultComplexity(framework);
+  const complexityChoices =
+    framework === 'next'
+      ? [
+          { name: 'simple', value: 'simple' },
+          { name: 'client', value: 'client' },
+          { name: 'complex', value: 'complex' }
+        ]
+      : framework === 'vanilla'
+        ? [{ name: 'default', value: 'medium' }]
+        : Object.keys(COMPLEXITY_LEVELS).map((k) => ({
+            name: k.toLowerCase(),
+            value: k.toLowerCase()
+          }));
+
   const answers = await inquirer.prompt([
     {
       type: 'input',
@@ -192,18 +252,15 @@ async function promptInteractive() {
     {
       type: 'list',
       name: 'complexity',
-      message: 'Complexity level:',
-      choices: Object.keys(COMPLEXITY_LEVELS).map(k => ({
-        name: k.toLowerCase(),
-        value: k.toLowerCase()
-      })),
-      default: 'medium'
+      message: `Complexity level (detected: ${framework}):`,
+      choices: complexityChoices,
+      default: defaultComplexity
     },
     {
       type: 'checkbox',
       name: 'features',
       message: 'Select features:',
-      choices: Object.keys(COMPONENT_FEATURES).map(k => ({
+      choices: Object.keys(COMPONENT_FEATURES).map((k) => ({
         name: `${k.toLowerCase()}${COMPONENT_FEATURES[k].default ? ' (default)' : ''}`,
         value: COMPONENT_FEATURES[k].name,
         checked: COMPONENT_FEATURES[k].default
@@ -213,6 +270,11 @@ async function promptInteractive() {
 
   return {
     ...answers,
-    outputPath: './src/components'
+    outputPath: gen.outputPath || './src/components',
+    framework: undefined,
+    complexity: answers.complexity,
+    prefix: loaded.prefix || 'atomix',
+    storybookCssImport: gen.storybookCssImport,
+    hookOutputDir: gen.hookOutputDir
   };
 }

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