@shohojdhara/atomix 0.4.6 → 0.4.8

package/scripts/cli/interactive-init.js

@@ -1,357 +0,0 @@
-/**
- * Interactive Init Wizard for Atomix Design System
- */
-
-import inquirer from 'inquirer';
-import chalk from 'chalk';
-import { readFile, writeFile, mkdir } from 'fs/promises';
-import { join, dirname, basename } from 'path';
-import { existsSync } from 'fs';
-import boxen from 'boxen';
-import ora from 'ora';
-
-import { projectTemplates, configTemplates } from './templates.js';
-import { commonTemplates } from './templates/common-templates.js';
-
-/**
- * Run the interactive init wizard
- */
-export async function runInitWizard() {
-  console.log(boxen(
-    chalk.bold.cyan('🎨 Atomix Design System Setup Wizard\n\n') +
-    chalk.gray('Let\'s set up your design system project!'),
-    {
-      padding: 1,
-      margin: 1,
-      borderStyle: 'round',
-      borderColor: 'cyan'
-    }
-  ));
-
-  try {
-    // Step 1: Project type
-    const { projectType } = await inquirer.prompt([
-      {
-        type: 'list',
-        name: 'projectType',
-        message: 'What type of project are you building?',
-        choices: [
-          { name: 'React Application', value: 'react' },
-          { name: 'Next.js Application', value: 'nextjs' },
-          { name: 'Vanilla JavaScript/HTML', value: 'vanilla' },
-          { name: 'Custom Setup', value: 'custom' }
-        ]
-      }
-    ]);
-
-    // Step 2: Theme selection
-    const { themeChoice } = await inquirer.prompt([
-      {
-        type: 'list',
-        name: 'themeChoice',
-        message: 'How would you like to handle theming?',
-        choices: [
-          { name: 'Use a pre-built theme', value: 'prebuilt' },
-          { name: 'Create a custom theme', value: 'custom' },
-          { name: 'Start with default styles', value: 'default' },
-          { name: 'I\'ll configure this later', value: 'skip' }
-        ]
-      }
-    ]);
-
-    let prebuiltThemeName = null;
-    if (themeChoice === 'prebuilt') {
-      const { theme } = await inquirer.prompt([
-        {
-          type: 'input',
-          name: 'theme',
-          message: 'Enter the name of the pre-built theme:',
-          default: 'default'
-        }
-      ]);
-      prebuiltThemeName = (theme && String(theme).trim()) || 'default';
-    }
-
-    // Step 3: Features
-    const { features } = await inquirer.prompt([
-      {
-        type: 'checkbox',
-        name: 'features',
-        message: 'Select additional features:',
-        choices: [
-          { name: 'TypeScript support', value: 'typescript', checked: true },
-          { name: 'Storybook integration', value: 'storybook' },
-          { name: 'Testing setup (Vitest)', value: 'testing' },
-          { name: 'ESLint & Prettier', value: 'linting' },
-          { name: 'Git hooks (Husky)', value: 'githooks' },
-          { name: 'CI/CD workflows', value: 'cicd' }
-        ]
-      }
-    ]);
-
-    // Step 4: Configuration
-    const { configType } = await inquirer.prompt([
-      {
-        type: 'list',
-        name: 'configType',
-        message: 'Configuration file format:',
-        choices: [
-          { name: 'JSON (.atomixrc.json)', value: 'json' },
-          { name: 'JavaScript (atomix.config.js)', value: 'js' },
-          { name: 'No configuration file', value: 'none' }
-        ]
-      }
-    ]);
-
-    // Step 5: Installation
-    const { shouldInstall } = await inquirer.prompt([
-      {
-        type: 'confirm',
-        name: 'shouldInstall',
-        message: 'Install dependencies now?',
-        default: true
-      }
-    ]);
-
-    // Create project structure
-    if (projectType !== 'custom') {
-      const template = projectTemplates[projectType];
-
-      // Step 6: Create/Update package.json
-      const packageJsonPath = join(process.cwd(), 'package.json');
-      let packageJson = {};
-
-      if (existsSync(packageJsonPath)) {
-        packageJson = JSON.parse(await readFile(packageJsonPath, 'utf8'));
-      } else {
-        // Create basic package.json
-        packageJson = {
-          name: basename(process.cwd()),
-          version: '0.1.0',
-          private: true,
-          scripts: {},
-          dependencies: {},
-          devDependencies: {}
-        };
-      }
-
-      // Merge dependencies
-      const packageJsonVersion = packageJson.version || '0.1.0';
-
-      template.dependencies.forEach(dep => {
-        if (!packageJson.dependencies[dep]) {
-          // Use a default compatible version if not specified
-          const defaultVersions = {
-            'react': '^18.0.0',
-            'react-dom': '^18.0.0',
-            'next': '^14.0.0',
-            'sass': '^1.70.0'
-          };
-          packageJson.dependencies[dep] = defaultVersions[dep] || 'latest';
-        }
-      });
-
-      template.devDependencies.forEach(dep => {
-        if (!packageJson.devDependencies[dep]) {
-          const defaultDevVersions = {
-            'typescript': '^5.0.0',
-            'vite': '^5.0.0',
-            '@shohojdhara/atomix': `^${packageJsonVersion}` // Self-reference for templates
-          };
-          packageJson.devDependencies[dep] = defaultDevVersions[dep] || 'latest';
-        }
-      });
-
-      // Merge scripts carefully
-      const themePath = themeChoice === 'prebuilt' && prebuiltThemeName
-        ? `themes/${prebuiltThemeName}`
-        : 'themes/custom';
-      const newScripts = {
-        'dev': projectType === 'nextjs' ? 'next dev' : 'vite',
-        'build': projectType === 'nextjs' ? 'next build' : 'vite build',
-        'build:theme': `atomix build-theme ${themePath}`,
-        'generate:component': 'atomix generate component',
-        'validate': 'atomix validate --tokens --theme'
-      };
-
-      if (features.includes('storybook')) {
-        newScripts['storybook'] = 'storybook dev -p 6006';
-        newScripts['build:storybook'] = 'storybook build';
-      }
-
-      if (features.includes('testing')) {
-        newScripts['test'] = 'vitest';
-        newScripts['test:watch'] = 'vitest --watch';
-      }
-
-      // Add new scripts without overwriting user's existing scripts
-      for (const [key, value] of Object.entries(newScripts)) {
-        if (!packageJson.scripts[key]) {
-          packageJson.scripts[key] = value;
-        } else if (packageJson.scripts[key] !== value) {
-          // Suggest renamed script if conflict exists
-          const suggestedKey = `atomix:${key}`;
-          if (!packageJson.scripts[suggestedKey]) {
-            packageJson.scripts[suggestedKey] = value;
-            console.log(chalk.yellow(`  ⚠️  Script conflict for "${key}". Added as "${suggestedKey}" instead.`));
-          }
-        }
-      }
-
-      await writeFile(packageJsonPath, JSON.stringify(packageJson, null, 2), 'utf8');
-      console.log(chalk.green('  ✓ Updated package.json'));
-
-      // Create directories
-      await mkdir('src', { recursive: true });
-      if (projectType === 'nextjs') {
-        await mkdir('src/pages', { recursive: true });
-      } else if (projectType === 'react') {
-        await mkdir('src/components', { recursive: true });
-      } else if (projectType === 'vanilla') {
-        await mkdir('src/styles', { recursive: true });
-      }
-
-      // Write template files
-      const spinner = ora('Creating project files...').start();
-      let filesCreated = 0;
-      const totalFiles = Object.keys(template.files).length;
-      
-      for (const [path, content] of Object.entries(template.files)) {
-        const filePath = join(process.cwd(), path);
-        const dir = dirname(filePath);
-
-        if (!existsSync(dir)) {
-          await mkdir(dir, { recursive: true });
-        }
-
-        await writeFile(filePath, content, 'utf8');
-        filesCreated++;
-        spinner.text = `Creating project files... (${filesCreated}/${totalFiles})`;
-      }
-      
-      spinner.succeed(chalk.green(`✓ Created ${filesCreated} files`));
-      
-      // Generate README
-      const readmeSpinner = ora('Generating README...').start();
-      const projectName = basename(process.cwd());
-      const readmeTemplate = projectType === 'react' 
-        ? commonTemplates.readme.react(projectName)
-        : projectType === 'nextjs'
-        ? commonTemplates.readme.nextjs(projectName)
-        : commonTemplates.readme.vanilla(projectName);
-      
-      await writeFile(
-        join(process.cwd(), 'README.md'),
-        readmeTemplate,
-        'utf8'
-      );
-      readmeSpinner.succeed(chalk.green('✓ Generated README.md'));
-    }
-
-    // Create configuration file
-    if (configType !== 'none') {
-      const configTemplate = configType === 'json'
-        ? configTemplates.basic
-        : configTemplates.advanced;
-      const themePathForConfig = themeChoice === 'prebuilt' && prebuiltThemeName
-        ? `themes/${prebuiltThemeName}`
-        : 'themes/custom';
-
-      for (const [filename, content] of Object.entries(configTemplate)) {
-        let configContent = typeof content === 'object'
-          ? JSON.stringify(content, null, 2)
-          : content;
-
-        if (themeChoice === 'prebuilt' && prebuiltThemeName) {
-          if (typeof content === 'object' && content.theme) {
-            const merged = { ...content, theme: { ...content.theme, path: themePathForConfig } };
-            configContent = JSON.stringify(merged, null, 2);
-          } else if (typeof content === 'string') {
-            configContent = content.replace(/path:\s*['"]themes\/custom['"]/g, `path: '${themePathForConfig}'`);
-          }
-        }
-
-        await writeFile(
-          join(process.cwd(), filename),
-          configContent,
-          'utf8'
-        );
-        console.log(chalk.green(`  ✓ Created ${filename}`));
-      }
-    }
-
-    // Create custom theme if selected
-    if (themeChoice === 'custom') {
-      await mkdir('themes/custom', { recursive: true });
-
-      const themeContent = `// Custom Theme
-// Generated by Atomix CLI
-
-@use '@shohojdhara/atomix/scss/settings' as * with (
-  // Your custom token overrides
-  $primary-500: #7AFFD7,
-  $secondary-500: #FF5733,
-  
-  // Add more overrides as needed
-);
-
-// Import Atomix components
-@use '@shohojdhara/atomix/scss/components';
-
-// Your custom styles
-.custom-component {
-  // Custom component styles
-}`;
-
-      await writeFile(
-        join(process.cwd(), 'themes/custom/index.scss'),
-        themeContent,
-        'utf8'
-      );
-      console.log(chalk.green('  ✓ Created custom theme'));
-    }
-
-    // Success message
-    console.log(boxen(
-      chalk.bold.green('✨ Setup Complete!\n\n') +
-      chalk.cyan('Your Atomix project is ready.\n\n') +
-      chalk.gray('Next steps:\n') +
-      (shouldInstall ? '' : chalk.white('1. Install dependencies: npm install\n')) +
-      chalk.white(`${shouldInstall ? '1' : '2'}. Start development: npm run dev\n`) +
-      chalk.white(`${shouldInstall ? '2' : '3'}. Build your theme: npm run build:theme\n`) +
-      chalk.white(`${shouldInstall ? '3' : '4'}. Generate components: npm run generate:component\n\n`) +
-      chalk.gray('Documentation: https://github.com/shohojdhara/atomix'),
-      {
-        padding: 1,
-        margin: 1,
-        borderStyle: 'round',
-        borderColor: 'green'
-      }
-    ));
-
-    // Install dependencies if requested
-    if (shouldInstall) {
-      console.log(chalk.cyan('\n📥 Installing dependencies...\n'));
-      const { execSync } = await import('child_process');
-
-      try {
-        execSync('npm install', { stdio: 'inherit' });
-        console.log(chalk.green('\n✅ Dependencies installed successfully!'));
-      } catch (error) {
-        console.error(chalk.red('\n❌ Failed to install dependencies'));
-        console.log(chalk.yellow('Please run: npm install'));
-      }
-    }
-
-  } catch (error) {
-    if (error.isTTYError) {
-      console.error(chalk.red('This environment doesn\'t support interactive prompts'));
-      console.log(chalk.yellow('Please use manual setup commands instead'));
-    } else {
-      console.error(chalk.red('Setup failed:'), error.message);
-    }
-    process.exit(1);
-  }
-}
-
-export default runInitWizard;

package/scripts/cli/utils.js

@@ -1,359 +0,0 @@
-/**
- * CLI Utility Functions
- * Provides common utilities for the Atomix CLI including security, validation, and helpers
- */
-
-import { resolve, relative, isAbsolute, normalize } from 'path';
-import { access } from 'fs/promises';
-
-/**
- * Enhanced Error Class for CLI
- */
-export class AtomixCLIError extends Error {
-  constructor(message, code, suggestions = []) {
-    super(message);
-    this.name = 'AtomixCLIError';
-    this.code = code;
-    this.suggestions = suggestions;
-  }
-}
-
-/**
- * Validates and sanitizes file paths to prevent directory traversal attacks
- * @param {string} inputPath - The path to validate
- * @param {string} basePath - The base directory (defaults to process.cwd())
- * @returns {Object} { isValid: boolean, safePath: string, error?: string }
- */
-export function validatePath(inputPath, basePath = process.cwd()) {
-  try {
-    // Normalize the paths to remove any '..' or '.' segments
-    const normalizedBase = normalize(resolve(basePath));
-    const normalizedInput = normalize(isAbsolute(inputPath)
-      ? inputPath
-      : resolve(basePath, inputPath));
-
-    // Check if the resolved path is within the base directory
-    const relativePath = relative(normalizedBase, normalizedInput);
-
-    // If the relative path starts with '..', it's outside the base directory
-    if (relativePath.startsWith('..')) {
-      return {
-        isValid: false,
-        safePath: null,
-        error: 'Path is outside the project directory'
-      };
-    }
-
-    // Additional checks for sensitive paths
-    const sensitivePatterns = [
-      /^\.git/,
-      /node_modules/,
-      /^\.env/,
-      /\.pem$/,
-      /\.key$/,
-      /private/i,
-      /secret/i
-    ];
-
-    for (const pattern of sensitivePatterns) {
-      if (pattern.test(relativePath)) {
-        return {
-          isValid: false,
-          safePath: null,
-          error: `Access to sensitive path is restricted: ${pattern}`
-        };
-      }
-    }
-
-    return {
-      isValid: true,
-      safePath: normalizedInput,
-      error: null
-    };
-  } catch (error) {
-    return {
-      isValid: false,
-      safePath: null,
-      error: `Invalid path: ${error.message}`
-    };
-  }
-}
-
-/**
- * Validates component names according to PascalCase convention
- * @param {string} name - The component name to validate
- * @returns {Object} { isValid: boolean, error?: string }
- */
-export function validateComponentName(name) {
-  if (!name || typeof name !== 'string') {
-    return {
-      isValid: false,
-      error: 'Component name must be a non-empty string'
-    };
-  }
-
-  // Check PascalCase: starts with uppercase, only contains letters and numbers
-  if (!/^[A-Z][a-zA-Z0-9]*$/.test(name)) {
-    return {
-      isValid: false,
-      error: 'Component name must be in PascalCase (e.g., Button, CardHeader)'
-    };
-  }
-
-  // Check for reserved words
-  const reservedWords = [
-    'Component', 'React', 'Fragment', 'Suspense', 'StrictMode',
-    'Error', 'Loading', 'App', 'Root', 'Document', 'Html'
-  ];
-
-  if (reservedWords.includes(name)) {
-    return {
-      isValid: false,
-      error: `"${name}" is a reserved word. Please choose a different name.`
-    };
-  }
-
-  // Check minimum length
-  if (name.length < 2) {
-    return {
-      isValid: false,
-      error: 'Component name must be at least 2 characters long'
-    };
-  }
-
-  return { isValid: true };
-}
-
-/**
- * Validates theme names according to kebab-case convention
- * @param {string} name - The theme name to validate
- * @returns {Object} { isValid: boolean, error?: string }
- */
-export function validateThemeName(name) {
-  if (!name || typeof name !== 'string') {
-    return {
-      isValid: false,
-      error: 'Theme name must be a non-empty string'
-    };
-  }
-
-  // Check kebab-case: lowercase letters, numbers, and hyphens
-  if (!/^[a-z][a-z0-9-]*$/.test(name)) {
-    return {
-      isValid: false,
-      error: 'Theme name must be lowercase and use hyphens (e.g., dark-theme)'
-    };
-  }
-
-  // Check for consecutive hyphens
-  if (/--/.test(name)) {
-    return {
-      isValid: false,
-      error: 'Theme name cannot contain consecutive hyphens'
-    };
-  }
-
-  // Check for trailing hyphen
-  if (name.endsWith('-')) {
-    return {
-      isValid: false,
-      error: 'Theme name cannot end with a hyphen'
-    };
-  }
-
-  return { isValid: true };
-}
-
-/**
- * Sanitizes user input to prevent injection attacks
- * @param {string} input - The user input to sanitize
- * @returns {string} Sanitized input
- */
-export function sanitizeInput(input) {
-  if (typeof input !== 'string') {
-    return String(input);
-  }
-
-  // Remove any shell metacharacters that could be dangerous
-  // Added single and double quotes to the blacklist to prevent shell injection
-  return input
-    .replace(/[;&|`$<>\\"']/g, '')
-    .replace(/\0/g, '') // Remove null bytes
-    .trim();
-}
-
-/**
- * Checks if a file exists and is accessible
- * @param {string} filePath - Path to check
- * @returns {Promise<boolean>}
- */
-export async function fileExists(filePath) {
-  try {
-    await access(filePath);
-    return true;
-  } catch {
-    return false;
-  }
-}
-
-/**
- * Checks if running in CI environment
- * @returns {boolean}
- */
-export function isCI() {
-  return !!(
-    process.env.CI ||
-    process.env.CONTINUOUS_INTEGRATION ||
-    process.env.GITHUB_ACTIONS ||
-    process.env.GITLAB_CI ||
-    process.env.CIRCLECI ||
-    process.env.TRAVIS ||
-    process.env.JENKINS_URL
-  );
-}
-
-/**
- * Checks if running in debug mode
- * @returns {boolean}
- */
-export function isDebug() {
-  return process.env.ATOMIX_DEBUG === 'true' ||
-    process.argv.includes('--debug') ||
-    process.argv.includes('-d');
-}
-
-/**
- * Formats file size in human readable format
- * @param {number} bytes - File size in bytes
- * @returns {string} Formatted 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]}`;
-}
-
-/**
- * Debounce function for watch mode
- * @param {Function} func - Function to debounce
- * @param {number} wait - Wait time in milliseconds
- * @returns {Function} Debounced function
- */
-export function debounce(func, wait) {
-  let timeout;
-  return function executedFunction(...args) {
-    const later = () => {
-      clearTimeout(timeout);
-      func(...args);
-    };
-    clearTimeout(timeout);
-    timeout = setTimeout(later, wait);
-  };
-}
-
-/**
- * Creates a safe file path for cross-platform compatibility
- * @param {...string} segments - Path segments
- * @returns {string} Safe file path
- */
-export function safePath(...segments) {
-  // Filter out empty segments and join with proper separator
-  return segments
-    .filter(Boolean)
-    .join('/')
-    .replace(/\/+/g, '/') // Remove duplicate slashes
-    .replace(/\\/g, '/'); // Convert Windows backslashes
-}
-
-/**
- * Validates SCSS/CSS color values
- * @param {string} color - Color value to validate
- * @returns {boolean}
- */
-export function isValidColor(color) {
-  const patterns = [
-    /^#[0-9A-F]{3}$/i,        // #RGB
-    /^#[0-9A-F]{4}$/i,        // #RGBA
-    /^#[0-9A-F]{6}$/i,        // #RRGGBB
-    /^#[0-9A-F]{8}$/i,        // #RRGGBBAA
-    /^rgb\(/i,                 // rgb()
-    /^rgba\(/i,                // rgba()
-    /^hsl\(/i,                 // hsl()
-    /^hsla\(/i,                // hsla()
-    /^var\(--/                 // CSS custom property
-  ];
-
-  return patterns.some(pattern => pattern.test(color));
-}
-
-/**
- * Extracts and validates npm scripts from package.json
- * @param {Object} packageJson - Parsed package.json content
- * @param {Array<string>} requiredScripts - List of required script names
- * @returns {Object} { valid: boolean, missing: Array<string> }
- */
-export function validateNpmScripts(packageJson, requiredScripts = []) {
-  const scripts = packageJson.scripts || {};
-  const missing = requiredScripts.filter(script => !scripts[script]);
-
-  return {
-    valid: missing.length === 0,
-    missing
-  };
-}
-
-/**
- * Generates a unique ID for components/themes
- * @param {string} prefix - Prefix for the ID
- * @returns {string} Unique ID
- */
-export function generateId(prefix = 'atomix') {
-  const timestamp = Date.now().toString(36);
-  const random = Math.random().toString(36).substring(2, 7);
-  return `${prefix}-${timestamp}-${random}`;
-}
-
-/**
- * Checks Node.js version compatibility
- * @param {string} requiredVersion - Minimum required version (e.g., '18.0.0')
- * @returns {Object} { compatible: boolean, current: string, required: string }
- */
-export function checkNodeVersion(requiredVersion = '18.0.0') {
-  const currentVersion = process.version.substring(1); // Remove 'v' prefix
-  const current = currentVersion.split('.').map(Number);
-  const required = requiredVersion.split('.').map(Number);
-
-  let compatible = true;
-  for (let i = 0; i < required.length; i++) {
-    if (current[i] < required[i]) {
-      compatible = false;
-      break;
-    } else if (current[i] > required[i]) {
-      break;
-    }
-  }
-
-  return {
-    compatible,
-    current: currentVersion,
-    required: requiredVersion
-  };
-}
-
-export default {
-  validatePath,
-  validateComponentName,
-  validateThemeName,
-  sanitizeInput,
-  fileExists,
-  isCI,
-  isDebug,
-  formatFileSize,
-  debounce,
-  safePath,
-  isValidColor,
-  validateNpmScripts,
-  generateId,
-  checkNodeVersion
-};