@shohojdhara/atomix 0.4.7 → 0.4.8

package/scripts/cli/commands/build-theme.js

@@ -0,0 +1,112 @@
+/**
+ * Atomix CLI Build Theme Command
+ */
+
+import { resolve, basename, dirname } from 'path';
+import chokidar from 'chokidar';
+import { logger } from '../utils/logger.js';
+import { AtomixCLIError } from '../utils/error.js';
+import { filesystem } from '../internal/filesystem.js';
+import { themeCompiler } from '../internal/compiler.js';
+import { sanitizeInput } from '../utils/helpers.js';
+
+/**
+ * Action logic for building a theme
+ * @param {string} themePath - Input path to theme SCSS
+ * @param {object} options - Command options
+ */
+export async function buildThemeAction(themePath, options) {
+  const spinner = logger.spinner('Initializing theme build...').start();
+
+  try {
+    const sanitizedThemePath = sanitizeInput(themePath);
+    const themeValidation = filesystem.validatePath(sanitizedThemePath);
+
+    if (!themeValidation.isValid) {
+      throw new AtomixCLIError(
+        themeValidation.error,
+        'INVALID_PATH',
+        [
+          'Ensure theme path is within the project directory',
+          'Avoid sensitive or absolute system paths'
+        ]
+      );
+    }
+
+    const sanitizedOutput = sanitizeInput(options.output || './dist');
+    const outputValidation = filesystem.validatePath(sanitizedOutput);
+
+    if (!outputValidation.isValid) {
+      throw new AtomixCLIError(
+        outputValidation.error,
+        'INVALID_PATH',
+        ['Use a project-relative directory for output']
+      );
+    }
+
+    // Resolve index.scss
+    const indexPath = sanitizedThemePath.endsWith('.scss')
+      ? resolve(themeValidation.safePath)
+      : resolve(themeValidation.safePath, 'index.scss');
+
+    if (!(await filesystem.exists(indexPath))) {
+      throw new AtomixCLIError(
+        `Theme file not found: ${indexPath}`,
+        'THEME_NOT_FOUND',
+        ['Check if the file path is correct', 'Ensure the file has a .scss extension']
+      );
+    }
+
+    const themeName = basename(dirname(indexPath));
+
+    const performBuild = async () => {
+      try {
+        await themeCompiler.compile(indexPath, outputValidation.safePath, {
+          minify: options.minify,
+          sourcemap: options.sourcemap,
+          analyze: options.analyze,
+          themeName,
+          logger: {
+            info: (msg) => { spinner.text = msg; },
+            debug: (msg) => logger.debug(msg)
+          }
+        });
+        
+        spinner.succeed(`Theme '${themeName}' built successfully`);
+        if (options.watch) {
+          logger.info('\n👁️  Watch mode enabled. Rebuilding on changes...');
+        }
+      } catch (error) {
+        spinner.fail(`Build failed: ${error.message}`);
+        if (!options.watch) throw error;
+      }
+    };
+
+    // Initial build
+    await performBuild();
+
+    // Watch mode
+    if (options.watch) {
+      const watcher = chokidar.watch([dirname(indexPath)], {
+        ignored: /node_modules/,
+        persistent: true,
+        ignoreInitial: true
+      });
+
+      watcher.on('all', async (event, path) => {
+        logger.debug(`File ${event}: ${path}`);
+        spinner.start('Rebuilding theme...');
+        await performBuild();
+      });
+
+      process.on('SIGINT', () => {
+        watcher.close();
+        process.exit(0);
+      });
+    }
+
+  } catch (error) {
+    spinner.fail('Operation failed');
+    throw error;
+  }
+}

package/scripts/cli/commands/generate.js

@@ -0,0 +1,97 @@
+/**
+ * Atomix CLI Generate Command
+ */
+
+import inquirer from 'inquirer';
+import { logger } from '../utils/logger.js';
+import { AtomixCLIError } from '../utils/error.js';
+import { generator, COMPLEXITY_LEVELS, COMPONENT_FEATURES } from '../internal/generator.js';
+import { filesystem } from '../internal/filesystem.js';
+import { validateComponentName } from '../utils/validation.js';
+
+/**
+ * Action logic for generating components
+ */
+export async function generateAction(type, name, options) {
+  let config = {
+    name,
+    complexity: options.complexity || 'medium',
+    features: options.tests ? ['tests', 'storybook', 'styles', 'hook'] : ['storybook', 'styles', 'hook'],
+    outputPath: options.path || './src/components'
+  };
+
+  if (options.interactive) {
+    config = await promptInteractive();
+    if (!config) return;
+  }
+
+  const spinner = logger.spinner(`Generating ${type}: ${config.name}...`).start();
+
+  try {
+    // Validation
+    const nameValidation = validateComponentName(config.name);
+    if (!nameValidation.isValid) {
+      throw new AtomixCLIError(nameValidation.error, 'INVALID_NAME', ['Use PascalCase (e.g., MyComponent)']);
+    }
+
+    const pathValidation = filesystem.validatePath(config.outputPath);
+    if (!pathValidation.isValid) {
+      throw new AtomixCLIError(pathValidation.error, 'INVALID_PATH');
+    }
+
+    // Execution
+    const path = await generator.generateComponent(config.name, {
+      ...config,
+      logger: { debug: (msg) => logger.debug(msg) }
+    });
+
+    spinner.succeed(`Generated component ${config.name} at ${path}`);
+
+    if (options.validate) {
+      const report = await generator.validate(config.name, path);
+      if (!report.valid) {
+        logger.warn('Validation found minor issues:');
+        report.issues.forEach(i => logger.info(`  - ${i}`));
+      }
+    }
+
+    logger.box(`🎉 Component ${config.name} ready!\nRun: atomix validate component ${config.name}`);
+
+  } catch (error) {
+    spinner.fail('Generation failed');
+    throw error;
+  }
+}
+
+async function promptInteractive() {
+  logger.info('🎨 Interactive Component Generator');
+  
+  const answers = await inquirer.prompt([
+    {
+      type: 'input',
+      name: 'name',
+      message: 'Component name (PascalCase):',
+      validate: (val) => validateComponentName(val).isValid || validateComponentName(val).error
+    },
+    {
+      type: 'list',
+      name: 'complexity',
+      message: 'Complexity level:',
+      choices: Object.keys(COMPLEXITY_LEVELS).map(k => k.toLowerCase())
+    },
+    {
+      type: 'checkbox',
+      name: 'features',
+      message: 'Select features:',
+      choices: Object.keys(COMPONENT_FEATURES).map(k => ({
+        name: k.toLowerCase(),
+        checked: COMPONENT_FEATURES[k].default
+      }))
+    }
+  ]);
+
+  return {
+    ...answers,
+    outputPath: './src/components'
+  };
+}

package/scripts/cli/commands/init.js

@@ -0,0 +1,46 @@
+/**
+ * Atomix CLI Init Command
+ */
+
+import inquirer from 'inquirer';
+import { logger } from '../utils/logger.js';
+import { wizard } from '../internal/wizard.js';
+
+/**
+ * Action logic for the init command
+ */
+export async function initAction() {
+  logger.info('🎨 Atomix Design System Setup Wizard');
+
+  try {
+    const answers = await inquirer.prompt([
+      {
+        type: 'list',
+        name: 'projectType',
+        message: 'What type of project are you building?',
+        choices: ['react', 'nextjs', 'vanilla']
+      },
+      {
+        type: 'checkbox',
+        name: 'features',
+        message: 'Select features:',
+        choices: ['typescript', 'storybook', 'testing']
+      }
+    ]);
+
+    const spinner = logger.spinner('Setting up project...').start();
+    
+    await wizard.initProject(answers.projectType, {
+      ...answers,
+      logger: { debug: (msg) => logger.debug(msg) }
+    });
+
+    spinner.succeed('Project initialized successfully');
+    
+    logger.box('✨ Setup Complete!\nRun: npm run dev');
+
+  } catch (error) {
+    logger.error(`Setup failed: ${error.message}`);
+    throw error;
+  }
+}

package/scripts/cli/internal/compiler.js

@@ -0,0 +1,114 @@
+/**
+ * Atomix CLI Internal Compiler
+ * Handles SCSS compilation and CSS post-processing
+ */
+
+import * as sass from 'sass';
+import postcss from 'postcss';
+import autoprefixer from 'autoprefixer';
+import cssnano from 'cssnano';
+import { dirname, join } from 'path';
+import { fileURLToPath } from 'url';
+import { readFile, writeFile, mkdir, stat } from 'fs/promises';
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = dirname(__filename);
+
+export const themeCompiler = {
+  /**
+   * Compiles a theme from SCSS to CSS
+   * @param {string} indexPath - Path to the index SCSS file
+   * @param {string} outputPath - Path to the output directory
+   * @param {object} options - Compilation options
+   */
+  async compile(indexPath, outputDir, options = {}) {
+    const {
+      sourcemap = false,
+      minify = true,
+      analyze = false,
+      logger
+    } = options;
+
+    const startTime = Date.now();
+    const themeName = options.themeName || 'theme';
+
+    // 1. Compile SCSS
+    if (logger) logger.debug(`Compiling SCSS: ${indexPath}`);
+    
+    const result = sass.compile(indexPath, {
+      loadPaths: [
+        process.cwd(),
+        join(process.cwd(), 'node_modules'),
+        join(__dirname, '../../../src'),
+        join(__dirname, '../../../src/styles'),
+        dirname(indexPath)
+      ],
+      sourceMap: sourcemap,
+      style: 'expanded',
+    });
+
+    // 2. Process with PostCSS
+    if (logger) logger.debug('Processing with PostCSS');
+    const processed = await postcss([
+      autoprefixer({
+        overrideBrowserslist: ['> 1%', 'last 2 versions', 'not dead'],
+      }),
+    ]).process(result.css, {
+      from: indexPath,
+      map: sourcemap,
+    });
+
+    // 3. Ensure output directory exists
+    await mkdir(outputDir, { recursive: true });
+
+    // 4. Write expanded CSS
+    const expandedPath = join(outputDir, `${themeName}.css`);
+    await writeFile(expandedPath, processed.css, 'utf8');
+
+    const stats = await stat(expandedPath);
+    const sizeKB = (stats.size / 1024).toFixed(2);
+
+    if (logger) logger.info(`✓ Built ${expandedPath} (${sizeKB} KB)`);
+
+    // 5. Minify if requested
+    let minifiedStats = null;
+    if (minify) {
+      if (logger) logger.debug('Minifying CSS');
+      const minified = await postcss([
+        autoprefixer(),
+        cssnano({ preset: 'default' }),
+      ]).process(result.css, {
+        from: indexPath,
+      });
+
+      const minPath = join(outputDir, `${themeName}.min.css`);
+      await writeFile(minPath, minified.css, 'utf8');
+
+      minifiedStats = await stat(minPath);
+      const minSizeKB = (minifiedStats.size / 1024).toFixed(2);
+      if (logger) logger.info(`✓ Built ${minPath} (${minSizeKB} KB)`);
+    }
+
+    // 6. Analyze if requested
+    if (analyze && logger) {
+      logger.info('\n📊 Theme Analysis:');
+      logger.info(`  Original size: ${sizeKB} KB`);
+      if (minify && minifiedStats) {
+        const minSizeKB = (minifiedStats.size / 1024).toFixed(2);
+        const reduction = ((1 - minifiedStats.size / stats.size) * 100).toFixed(1);
+        logger.info(`  Minified size: ${minSizeKB} KB (${reduction}% reduction)`);
+      }
+      logger.info(`  Build time: ${Date.now() - startTime}ms`);
+    }
+
+    return {
+      expandedPath,
+      minifiedPath: minify ? join(outputDir, `${themeName}.min.css`) : null,
+      stats: {
+        originalSize: stats.size,
+        minifiedSize: minifiedStats ? minifiedStats.size : null,
+        duration: Date.now() - startTime
+      }
+    };
+  }
+};

package/scripts/cli/internal/filesystem.js

@@ -0,0 +1,58 @@
+/**
+ * Atomix CLI Internal Filesystem
+ * Utilities for safe file and path operations
+ */
+
+import { resolve, normalize, isAbsolute, relative } from 'path';
+import { access } from 'fs/promises';
+
+export const filesystem = {
+  /**
+   * Validates and resolves a path within the project directory
+   * @param {string} inputPath - The path to validate
+   * @param {string} basePath - Base directory (defaults to process.cwd())
+   * @returns {Object} { isValid: boolean, safePath: string, error?: string }
+   */
+  validatePath(inputPath, basePath = process.cwd()) {
+    try {
+      const normalizedBase = normalize(resolve(basePath));
+      const normalizedInput = normalize(isAbsolute(inputPath)
+        ? inputPath
+        : resolve(basePath, inputPath));
+
+      const relativePath = relative(normalizedBase, normalizedInput);
+
+      if (relativePath.startsWith('..')) {
+        return {
+          isValid: false,
+          safePath: null,
+          error: 'Path is outside the project directory'
+        };
+      }
+
+      return {
+        isValid: true,
+        safePath: normalizedInput,
+        error: null
+      };
+    } catch (error) {
+      return {
+        isValid: false,
+        safePath: null,
+        error: `Invalid path: ${error.message}`
+      };
+    }
+  },
+
+  /**
+   * Checks if a file exists
+   */
+  async exists(path) {
+    try {
+      await access(path);
+      return true;
+    } catch {
+      return false;
+    }
+  }
+};

package/scripts/cli/internal/generator.js

@@ -0,0 +1,110 @@
+/**
+ * Atomix CLI Internal Generator
+ * Core logic for scaffolding components and assets
+ */
+
+import { writeFile, mkdir, readFile } from 'fs/promises';
+import { existsSync } from 'fs';
+import { join } from 'path';
+import { componentTemplates } from '../templates.js';
+
+export const COMPLEXITY_LEVELS = {
+  SIMPLE: { name: 'simple', template: 'simple' },
+  MEDIUM: { name: 'medium', template: 'medium' },
+  COMPLEX: { name: 'complex', template: 'complex' }
+};
+
+export const COMPONENT_FEATURES = {
+  TYPESCRIPT: { name: 'typescript', default: true },
+  STORYBOOK: { name: 'storybook', default: true },
+  TESTS: { name: 'tests', default: false },
+  HOOK: { name: 'hook', default: true },
+  STYLES: { name: 'styles', default: true },
+  ACCESSIBILITY: { name: 'accessibility', default: true }
+};
+
+export const generator = {
+  /**
+   * Generates component files based on options
+   */
+  async generateComponent(name, options = {}) {
+    const {
+      outputPath,
+      complexity = 'medium',
+      features = [],
+      logger
+    } = options;
+
+    const componentPath = join(outputPath, name);
+    await mkdir(componentPath, { recursive: true });
+
+    // 1. Generate Component File
+    const templateName = COMPLEXITY_LEVELS[complexity.toUpperCase()]?.template || 'medium';
+    let content = '';
+    
+    switch (templateName) {
+      case 'simple': content = componentTemplates.react.simple(name); break;
+      case 'medium': content = componentTemplates.react.medium(name); break;
+      case 'complex': content = componentTemplates.react.complex(name); break;
+      default: content = componentTemplates.react.component(name);
+    }
+
+    await writeFile(join(componentPath, `${name}.tsx`), content, 'utf8');
+    if (logger) logger.debug(`Created ${name}.tsx`);
+
+    // 2. Index File
+    await writeFile(join(componentPath, 'index.ts'), componentTemplates.react.index(name), 'utf8');
+
+    // 3. Optional Features
+    if (features.includes('storybook')) {
+      await writeFile(join(componentPath, `${name}.stories.tsx`), componentTemplates.react.story(name), 'utf8');
+    }
+
+    if (features.includes('tests')) {
+      await writeFile(join(componentPath, `${name}.test.tsx`), componentTemplates.react.test(name), 'utf8');
+    }
+
+    if (features.includes('hook')) {
+      const hookDir = join(outputPath, '..', 'lib', 'composables');
+      await mkdir(hookDir, { recursive: true });
+      await writeFile(join(hookDir, `use${name}.ts`), componentTemplates.composable.useHook(name), 'utf8');
+    }
+
+    // 4. Styles (ITCSS)
+    if (features.includes('styles')) {
+      const stylesDir = join(outputPath, '..', 'styles');
+      
+      const settingsPath = join(stylesDir, '01-settings');
+      await mkdir(settingsPath, { recursive: true });
+      await writeFile(join(settingsPath, `_settings.${name.toLowerCase()}.scss`), componentTemplates.scss.settings(name), 'utf8');
+
+      const compStylesPath = join(stylesDir, '06-components');
+      await mkdir(compStylesPath, { recursive: true });
+      await writeFile(join(compStylesPath, `_components.${name.toLowerCase()}.scss`), componentTemplates.scss.component(name), 'utf8');
+    }
+
+    return componentPath;
+  },
+
+  /**
+   * Validates a generated component
+   */
+  async validate(name, componentPath) {
+    const issues = [];
+    const componentFile = join(componentPath, `${name}.tsx`);
+    
+    if (!existsSync(componentFile)) {
+      issues.push(`Target file missing: ${name}.tsx`);
+      return { valid: false, issues };
+    }
+
+    const content = await readFile(componentFile, 'utf8');
+    if (!content.includes('displayName')) issues.push('Missing displayName');
+    if (!content.includes('aria-')) issues.push('Missing accessibility attributes');
+
+    return {
+      valid: issues.length === 0,
+      issues
+    };
+  }
+};

package/scripts/cli/internal/wizard.js

@@ -0,0 +1,61 @@
+/**
+ * Atomix CLI Internal Wizard
+ * Core logic for initializing proyectos and generating configuration
+ */
+
+import { readFile, writeFile, mkdir } from 'fs/promises';
+import { existsSync } from 'fs';
+import { join, dirname, basename } from 'path';
+import { projectTemplates } from '../templates.js';
+import { commonTemplates } from '../templates/common-templates.js';
+
+export const wizard = {
+  /**
+   * Initializes a project structure based on a template
+   */
+  async initProject(type, options = {}) {
+    const { logger } = options;
+    const template = projectTemplates[type];
+
+    if (!template) {
+        throw new Error(`Unknown project type: ${type}`);
+    }
+
+    // 1. Update package.json
+    await this._updatePackageJson(type, template, options);
+
+    // 2. Create directories
+    await mkdir('src', { recursive: true });
+
+    // 3. Write template files
+    for (const [path, content] of Object.entries(template.files)) {
+      const filePath = join(process.cwd(), path);
+      await mkdir(dirname(filePath), { recursive: true });
+      await writeFile(filePath, content, 'utf8');
+      if (logger) logger.debug(`Created ${path}`);
+    }
+
+    // 4. Generate README
+    const readme = type === 'react' 
+      ? commonTemplates.readme.react(basename(process.cwd()))
+      : commonTemplates.readme.nextjs(basename(process.cwd()));
+    await writeFile('README.md', readme, 'utf8');
+
+    return true;
+  },
+
+  async _updatePackageJson() {
+    const packageJsonPath = join(process.cwd(), 'package.json');
+    let pkg = { scripts: {}, dependencies: {}, devDependencies: {} };
+
+    if (existsSync(packageJsonPath)) {
+      pkg = JSON.parse(await readFile(packageJsonPath, 'utf8'));
+    }
+
+    // Merge logic... (Simplified for refactor brevity)
+    // Add scripts
+    pkg.scripts['build:theme'] = `atomix build-theme themes/custom`;
+    
+    await writeFile(packageJsonPath, JSON.stringify(pkg, null, 2), 'utf8');
+  }
+};

package/scripts/cli/utils/error.js

@@ -0,0 +1,47 @@
+/**
+ * Atomix CLI Error Class
+ * Standardized error handling with actionable suggestions
+ */
+
+export class AtomixCLIError extends Error {
+  /**
+   * @param {string} message - Human-readable error message
+   * @param {string} code - Unique error code (e.g., 'INVALID_PATH')
+   * @param {string[]} suggestions - Specific steps to resolve the issue
+   */
+  constructor(message, code, suggestions = []) {
+    super(message);
+    this.name = 'AtomixCLIError';
+    this.code = code;
+    this.suggestions = suggestions;
+  }
+}
+
+import chalk from 'chalk';
+
+/**
+ * Global CLI error handler
+ * @param {Error} error - The error object to handle
+ * @param {object} spinner - Optional ora spinner to stop
+ */
+export function handleCLIError(error, spinner = null) {
+  if (spinner) {
+    spinner.fail('Operation failed');
+  }
+
+  console.error(chalk.bold.red(`\n❌ ${error.message}`));
+
+  if (error instanceof AtomixCLIError && error.suggestions && error.suggestions.length > 0) {
+    console.log(chalk.yellow('\n💡 Suggestions:'));
+    error.suggestions.forEach((suggestion, index) => {
+      console.log(chalk.gray(`   ${index + 1}. ${suggestion}`));
+    });
+  }
+
+  if (process.env.ATOMIX_DEBUG === 'true' && error.stack) {
+    console.error(chalk.gray('\nStack trace:'));
+    console.error(chalk.gray(error.stack));
+  }
+
+  process.exit(1);
+}

package/scripts/cli/utils/helpers.js

@@ -0,0 +1,43 @@
+/**
+ * Atomix CLI Helper Utilities
+ */
+
+/**
+ * Sanitizes user input to prevent injection attacks
+ */
+export function sanitizeInput(input) {
+  if (typeof input !== 'string') return String(input);
+  return input.replace(/[;&|`$<>\\"']/g, '').replace(/\0/g, '').trim();
+}
+
+/**
+ * Checks Node.js version compatibility
+ */
+export function checkNodeVersion(requiredVersion = '18.0.0') {
+  const currentVersion = process.version.substring(1);
+  const current = currentVersion.split('.').map(Number);
+  const required = requiredVersion.split('.').map(Number);
+
+  for (let i = 0; i < required.length; i++) {
+    if (current[i] < required[i]) return { compatible: false, current: currentVersion, required: requiredVersion };
+    if (current[i] > required[i]) break;
+  }
+  return { compatible: true, current: currentVersion, required: requiredVersion };
+}
+
+/**
+ * Formats file size
+ */
+export function formatFileSize(bytes) {
+  const sizes = ['B', 'KB', 'MB', 'GB'];
+  if (bytes === 0) return '0 B';
+  const i = Math.floor(Math.log(bytes) / Math.log(1024));
+  return `${(bytes / Math.pow(1024, i)).toFixed(2)} ${sizes[i]}`;
+}
+
+/**
+ * Checks if running in CI environment
+ */
+export function isCI() {
+  return !!(process.env.CI || process.env.GITHUB_ACTIONS || process.env.JENKINS_URL);
+}