@shohojdhara/atomix 0.5.0 → 0.5.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@shohojdhara/atomix",
-  "version": "0.5.0",
+  "version": "0.5.2",
   "description": "Atomix Design System - A modern component library for web applications",
   "type": "module",
   "sideEffects": [
@@ -15,8 +15,11 @@
   "types": "dist/index.d.ts",
   "style": "dist/atomix.css",
   "sass": "src/styles/index.scss",
+  "unpkg": "dist/atomix.umd.min.js",
+  "jsdelivr": "dist/atomix.umd.min.js",
+  "browser": "dist/atomix.umd.min.js",
   "bin": {
-    "atomix": "./scripts/atomix-cli.js"
+    "atomix": "scripts/atomix-cli.js"
   },
   "exports": {
     ".": {
@@ -111,12 +114,22 @@
       "import": "./dist/heavy.js",
       "default": "./dist/heavy.js"
     },
+    "./cdn": {
+      "import": "./dist/atomix.umd.min.js",
+      "require": "./dist/atomix.umd.min.js",
+      "default": "./dist/atomix.umd.min.js"
+    },
     "./build-tools": {
       "types": "./build-tools/index.d.ts",
       "import": "./build-tools/index.js",
       "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": {
@@ -172,13 +185,14 @@
     "@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",
     "@vitest/coverage-v8": "^4.0.18",
     "browserslist": "^4.23.0",
+    "chromatic": "^15.3.1",
     "concurrently": "^8.0.0",
     "eslint": "^8.0.0",
     "eslint-plugin-import": "^2.29.0",
@@ -193,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",
@@ -207,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"
   },
@@ -220,6 +234,7 @@
     "build:styles": "rollup -c rollup.config.styles.js",
     "build:themes": "rollup -c rollup/config/themes.js",
     "build:parallel": "concurrently \"npm:build:js\" \"npm:build:types\" \"npm:build:styles\"",
+    "build:umd": "rollup -c rollup.config.umd.js",
     "build:cli": "rollup -c rollup.config.cli.js",
     "build:cli:dev": "rollup -c rollup.config.cli.js --environment NODE_ENV:development",
     "build:analyze": "ANALYZE=true rollup -c",
@@ -295,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

@@ -1,135 +1,3 @@
 /**
- * Test Setup for CLI Tests
+ * CLI test setup (node environment)
  */
-
-import { vi } from 'vitest';
-
-// Mock external dependencies
-vi.mock('ora', () => ({
-  default: vi.fn(() => ({
-    start: vi.fn(() => ({
-      succeed: vi.fn(),
-      fail: vi.fn(),
-      stop: vi.fn(),
-      text: ''
-    }))
-  }))
-}));
-
-vi.mock('inquirer', () => ({
-  prompt: vi.fn()
-}));
-
-vi.mock('chalk', () => ({
-  default: {
-    green: vi.fn((text) => text),
-    red: vi.fn((text) => text),
-    yellow: vi.fn((text) => text),
-    cyan: vi.fn((text) => text),
-    gray: vi.fn((text) => text),
-    blue: vi.fn((text) => text),
-    bold: {
-      green: vi.fn((text) => text),
-      red: vi.fn((text) => text),
-      yellow: vi.fn((text) => text),
-      cyan: vi.fn((text) => text),
-      blue: vi.fn((text) => text)
-    }
-  }
-}));
-
-vi.mock('boxen', () => ({
-  default: vi.fn((text) => text)
-}));
-
-vi.mock('chokidar', () => ({
-  default: vi.fn(() => ({
-    on: vi.fn(),
-    close: vi.fn()
-  }))
-}));
-
-// Mock file system operations
-vi.mock('fs/promises', async () => {
-  const actual = await vi.importActual('fs/promises');
-  return {
-    ...actual,
-    writeFile: vi.fn(actual.writeFile),
-    readFile: vi.fn(actual.readFile),
-    mkdir: vi.fn(actual.mkdir),
-    access: vi.fn(actual.access),
-    stat: vi.fn(actual.stat),
-    rm: vi.fn(actual.rm)
-  };
-});
-
-// Mock process.cwd for consistent test environment
-const originalCwd = process.cwd;
-
-beforeEach(() => {
-  // Reset all mocks before each test
-  vi.clearAllMocks();
-});
-
-afterEach(() => {
-  // Restore original process.cwd
-  process.cwd = originalCwd;
-});
-
-// Global test utilities
-global.createMockTempDir = () => '/tmp/atomix-test-' + Math.random().toString(36).substr(2, 9);
-
-global.mockComponentStructure = (componentName, content = '') => ({
-  [`${componentName}.tsx`]: content || `
-import React, { forwardRef } from 'react';
-
-export const ${componentName} = forwardRef<HTMLDivElement, ${componentName}Props>(
-  ({ children, className = '', ...props }, ref) => {
-    return (
-      <div ref={ref} className={className} {...props}>
-        {children}
-      </div>
-    );
-  }
-);
-
-interface ${componentName}Props {
-  children?: React.ReactNode;
-  className?: string;
-}
-  `,
-  'index.ts': `export { ${componentName} } from './${componentName}';`,
-  [`${componentName}.stories.tsx`]: `
-import type { Meta, StoryObj } from '@storybook/react';
-import { ${componentName} } from './${componentName}';
-
-const meta: Meta<typeof ${componentName}> = {
-  title: 'Components/${componentName}',
-  component: ${componentName},
-  parameters: {
-    layout: 'centered',
-  },
-  tags: ['autodocs'],
-};
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {
-  args: {
-    children: 'Test ${componentName}',
-  },
-};
-  `,
-  [`${componentName}.test.tsx`]: `
-import { render, screen } from '@testing-library/react';
-import { ${componentName} } from './${componentName}';
-
-describe('${componentName}', () => {
-  it('renders correctly', () => {
-    render(<${componentName}>Test</${componentName}>);
-    expect(screen.getByText('Test')).toBeInTheDocument();
-  });
-});
-  `
-});

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