@shohojdhara/atomix 0.3.3 → 0.3.5

package/scripts/cli/theme-bridge.js

@@ -0,0 +1,129 @@
+/**
+ * Theme CLI Bridge
+ * 
+ * Bridges the TypeScript theme devtools CLI with the main JavaScript CLI
+ */
+
+import { spawn } from 'child_process';
+import { join, dirname } from 'path';
+import { fileURLToPath } from 'url';
+import chalk from 'chalk';
+import ora from 'ora';
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = dirname(__filename);
+
+/**
+ * Execute theme CLI command
+ */
+export async function executeThemeCommand(command, args = [], options = {}) {
+  const spinner = options.spinner || ora(`Running theme ${command}...`).start();
+  
+  try {
+    // Path to the theme CLI
+    const themeCliPath = join(__dirname, '../../src/lib/theme/devtools/CLI.ts');
+    
+    // Use ts-node to execute TypeScript CLI
+    const tsNodePath = join(__dirname, '../../node_modules/.bin/ts-node');
+    
+    return new Promise((resolve, reject) => {
+      const child = spawn(tsNodePath, [themeCliPath, command, ...args], {
+        stdio: 'inherit',
+        cwd: process.cwd(),
+      });
+      
+      child.on('close', (code) => {
+        if (code === 0) {
+          spinner.succeed(chalk.green(`✓ Theme ${command} completed`));
+          resolve();
+        } else {
+          spinner.fail(chalk.red(`✗ Theme ${command} failed`));
+          reject(new Error(`Theme command failed with code ${code}`));
+        }
+      });
+      
+      child.on('error', (error) => {
+        spinner.fail(chalk.red(`✗ Theme ${command} failed`));
+        reject(error);
+      });
+    });
+  } catch (error) {
+    spinner.fail(chalk.red(`✗ Theme ${command} failed`));
+    throw error;
+  }
+}
+
+/**
+ * Create theme CLI bridge
+ */
+export function createThemeCLIBridge() {
+  return {
+    /**
+     * Validate theme configuration
+     */
+    async validate(options = {}) {
+      const args = [];
+      if (options.config) args.push('--config', options.config);
+      if (options.strict) args.push('--strict');
+      
+      return executeThemeCommand('validate', args, options);
+    },
+    
+    /**
+     * List all themes
+     */
+    async list(options = {}) {
+      return executeThemeCommand('list', [], options);
+    },
+    
+    /**
+     * Inspect a theme
+     */
+    async inspect(themeName, options = {}) {
+      const args = ['--theme', themeName];
+      if (options.json) args.push('--json');
+      
+      return executeThemeCommand('inspect', args, options);
+    },
+    
+    /**
+     * Compare two themes
+     */
+    async compare(theme1, theme2, options = {}) {
+      const args = ['--theme1', theme1, '--theme2', theme2];
+      
+      return executeThemeCommand('compare', args, options);
+    },
+    
+    /**
+     * Export a theme
+     */
+    async export(themeName, options = {}) {
+      const args = ['--theme', themeName];
+      if (options.output) args.push('--output', options.output);
+      
+      return executeThemeCommand('export', args, options);
+    },
+  };
+}
+
+/**
+ * Check if theme CLI is available
+ */
+export async function isThemeCLIAvailable() {
+  try {
+    const themeCliPath = join(__dirname, '../../src/lib/theme/devtools/CLI.ts');
+    const { access } = await import('fs/promises');
+    await access(themeCliPath);
+    return true;
+  } catch {
+    return false;
+  }
+}
+
+export default {
+  createThemeCLIBridge,
+  executeThemeCommand,
+  isThemeCLIAvailable,
+};
+

package/scripts/cli/token-manager.js

@@ -433,13 +433,38 @@ export async function importTokens(filePath, options = {}) {
         
       case 'js':
       case 'ts':
-        // Extract tokens from JS/TS export
-        const match = content.match(/export\s+(?:const|default)\s+\w*\s*=\s*({[\s\S]*})/);
-        if (match) {
-          // Simple eval (be careful in production)
-          tokens = eval(`(${match[1]})`);
-        } else {
-          throw new Error('Could not parse JavaScript/TypeScript tokens');
+        // Parse tokens safely without eval
+        try {
+          // Try to parse as JSON first (common case)
+          const jsonMatch = content.match(/export\s+(?:const|default)\s+\w*\s*=\s*({[\s\S]*})/);
+          if (jsonMatch) {
+            // Extract the object literal and clean it up
+            let objectStr = jsonMatch[1];
+            
+            // Remove trailing semicolon if present
+            objectStr = objectStr.replace(/;\s*$/, '');
+            
+            // Try direct JSON parsing first
+            try {
+              tokens = JSON.parse(objectStr);
+            } catch {
+              // If that fails, try to convert JS object to JSON
+              // This handles single quotes and unquoted keys
+              objectStr = objectStr
+                // Replace single quotes with double quotes
+                .replace(/'/g, '"')
+                // Add quotes to unquoted keys
+                .replace(/(\s*)([a-zA-Z_$][a-zA-Z0-9_$]*)\s*:/g, '$1"$2":')
+                // Handle trailing commas
+                .replace(/,(\s*[}\]])/g, '$1');
+              
+              tokens = JSON.parse(objectStr);
+            }
+          } else {
+            throw new Error('Could not find token export in JavaScript/TypeScript file');
+          }
+        } catch (error) {
+          throw new Error(`Could not parse JavaScript/TypeScript tokens: ${error.message}`);
         }
         break;
         

package/scripts/cli/utils.js

@@ -0,0 +1,347 @@
+/**
+ * CLI Utility Functions
+ * Provides common utilities for the Atomix CLI including security, validation, and helpers
+ */
+
+import { resolve, relative, isAbsolute, normalize } from 'path';
+import { existsSync } from 'fs';
+import { access } from 'fs/promises';
+
+/**
+ * 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
+  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
+};

package/scripts/sync-theme-config.js

@@ -25,7 +25,7 @@ const THEMES_CONFIG_JS = join(__dirname, '../src/themes/themes.config.js');
 async function parseThemeConfigTS() {
   try {
     const content = await readFile(THEME_CONFIG_TS, 'utf8');
-    
+
     // Extract themes object
     const themesMatch = content.match(/themes:\s*{([^}]+(?:{[^}]*}[^}]*)*[^}]+)}/s);
     if (!themesMatch) {
@@ -36,10 +36,10 @@ async function parseThemeConfigTS() {
     const themes = {};
     const themeRegex = /['"]([^'"]+)['"]\s*:\s*{([^}]+(?:{[^}]*}[^}]*)*[^}]+)}/gs;
     let match;
-    
+
     while ((match = themeRegex.exec(themesMatch[1])) !== null) {
       const [, themeName, themeConfig] = match;
-      
+
       // Parse theme properties
       const theme = {
         name: extractValue(themeConfig, 'name'),
@@ -51,7 +51,7 @@ async function parseThemeConfigTS() {
         status: extractValue(themeConfig, 'status'),
         color: extractValue(themeConfig, 'color'),
       };
-      
+
       // Parse features if present
       const featuresMatch = themeConfig.match(/features:\s*\[([^\]]*)\]/s);
       if (featuresMatch) {
@@ -60,7 +60,7 @@ async function parseThemeConfigTS() {
           .map(f => f.trim().replace(/['"]/g, ''))
           .filter(f => f.length > 0);
       }
-      
+
       // Parse a11y if present
       const a11yMatch = themeConfig.match(/a11y:\s*{([^}]*)}/);
       if (a11yMatch) {
@@ -69,28 +69,28 @@ async function parseThemeConfigTS() {
           modes: extractArray(a11yMatch[1], 'modes'),
         };
       }
-      
+
       themes[themeName] = theme;
     }
-    
+
     // Extract build configuration
     const buildMatch = content.match(/build:\s*(defaultBuildConfig|{[^}]+})/);
-    const build = buildMatch && buildMatch[1] === 'defaultBuildConfig' 
-      ? getDefaultBuildConfig() 
+    const build = buildMatch && buildMatch[1] === 'defaultBuildConfig'
+      ? getDefaultBuildConfig()
       : parseBuildConfig(buildMatch?.[1]);
-    
+
     // Extract runtime configuration  
     const runtimeMatch = content.match(/runtime:\s*(defaultRuntimeConfig|{[^}]+})/);
     const runtime = runtimeMatch && runtimeMatch[1] === 'defaultRuntimeConfig'
       ? getDefaultRuntimeConfig()
       : parseRuntimeConfig(runtimeMatch?.[1]);
-    
+
     // Extract integration configuration
     const integrationMatch = content.match(/integration:\s*(defaultIntegrationConfig|{[^}]+})/);
     const integration = integrationMatch && integrationMatch[1] === 'defaultIntegrationConfig'
       ? getDefaultIntegrationConfig()
       : parseIntegrationConfig(integrationMatch?.[1]);
-    
+
     return {
       themes,
       build,
@@ -138,7 +138,7 @@ function extractArray(text, key) {
   const regex = new RegExp(`${key}:\\s*\\[([^\\]]*)\\]`);
   const match = text.match(regex);
   if (!match) return undefined;
-  
+
   return match[1]
     .split(',')
     .map(item => item.trim().replace(/['"]/g, ''))
@@ -172,9 +172,9 @@ function getDefaultRuntimeConfig() {
   return {
     basePath: '/themes',
     cdnPath: null,
-    preload: ['shaj-default'],
+    preload: [],
     lazy: true,
-    defaultTheme: 'shaj-default',
+    defaultTheme: '',
     storageKey: 'atomix-theme',
     useMinified: "process.env.NODE_ENV === 'production'",
   };
@@ -230,7 +230,7 @@ function parseIntegrationConfig(configText) {
  */
 function generateThemesConfigJS(config) {
   const { themes, build, runtime, integration, dependencies } = config;
-  
+
   // Convert themes to metadata format
   const metadata = {};
   for (const [key, theme] of Object.entries(themes)) {
@@ -242,7 +242,7 @@ function generateThemesConfigJS(config) {
       }
     });
   }
-  
+
   return `/**
  * Theme Configuration
  *
@@ -281,24 +281,24 @@ export const themesConfig = {
  */
 async function main() {
   console.log('🔄 Syncing theme configuration...\n');
-  
+
   try {
     // Parse theme.config.ts
     console.log('📖 Reading theme.config.ts...');
     const config = await parseThemeConfigTS();
     console.log(`  ✅ Found ${Object.keys(config.themes).length} themes`);
-    
+
     // Generate themes.config.js
     console.log('\n📝 Generating themes.config.js...');
     const jsContent = generateThemesConfigJS(config);
-    
+
     // Write to file
     await writeFile(THEMES_CONFIG_JS, jsContent, 'utf8');
     console.log('  ✅ Written to src/themes/themes.config.js');
-    
+
     console.log('\n✨ Configuration sync complete!');
     console.log('   themes.config.js has been updated from theme.config.ts');
-    
+
   } catch (error) {
     console.error('\n💥 Sync failed:', error.message);
     process.exit(1);