@shohojdhara/atomix 0.4.7 → 0.4.9

package/scripts/cli/commands/sync-tokens.js

@@ -0,0 +1,206 @@
+/**
+ * Sync Tokens Command
+ * Synchronizes design tokens from external sources (Figma, Style Dictionary, etc.)
+ */
+
+import { existsSync } from 'fs';
+import { join } from 'path';
+import { logger } from '../utils/logger.js';
+import { AtomixCLIError } from '../utils/error.js';
+import { tokenProvider, TOKEN_FORMATS } from '../internal/tokens/token-provider.js';
+import { tokenValidator } from '../internal/tokens/token-validator.js';
+import { filesystem } from '../internal/filesystem.js';
+
+/**
+ * Token source configurations
+ */
+const TOKEN_SOURCES = {
+  FIGMA: {
+    name: 'Figma',
+    format: TOKEN_FORMATS.FIGMA,
+    defaultPath: './design-tokens/figma-tokens.json'
+  },
+  STYLE_DICTIONARY: {
+    name: 'Style Dictionary',
+    format: TOKEN_FORMATS.STYLE_DICTIONARY,
+    defaultPath: './design-tokens/style-dictionary.json'
+  },
+  W3C_DTCG: {
+    name: 'W3C DTCG',
+    format: TOKEN_FORMATS.W3C_DTCG,
+    defaultPath: './design-tokens/tokens.json'
+  }
+};
+
+/**
+ * Action logic for syncing tokens
+ * @param {string} source - Token source (figma, style-dictionary, w3c)
+ * @param {Object} options - CLI options
+ */
+export async function syncTokensAction(source, options) {
+  const spinner = logger.spinner(`Syncing tokens from ${source}...`).start();
+  
+  try {
+    // Determine source configuration
+    const sourceConfig = TOKEN_SOURCES[source.toUpperCase()];
+    if (!sourceConfig) {
+      throw new AtomixCLIError(
+        `Unknown token source: ${source}`,
+        'UNKNOWN_SOURCE',
+        [
+          'Available sources: figma, style-dictionary, w3c',
+          'Use `atomix sync-tokens --help` for usage information'
+        ]
+      );
+    }
+
+    // Determine file path
+    const filePath = options.file || sourceConfig.defaultPath;
+    const absolutePath = join(process.cwd(), filePath);
+
+    if (!existsSync(absolutePath)) {
+      throw new AtomixCLIError(
+        `Token file not found: ${absolutePath}`,
+        'TOKEN_FILE_NOT_FOUND',
+        [
+          'Verify the file path is correct',
+          'Export tokens from your design tool first',
+          'Use --file flag to specify custom path'
+        ]
+      );
+    }
+
+    // Load tokens using provider
+    logger.debug(`Loading tokens from ${filePath}`);
+    const loadedTokens = await tokenProvider.loadTokens(filePath, {
+      format: sourceConfig.format
+    });
+
+    // Validate tokens
+    logger.debug('Validating tokens');
+    const validationResults = tokenValidator.validate(loadedTokens);
+
+    if (!validationResults.valid) {
+      spinner.warn('Token sync completed with validation issues');
+      logger.info(tokenValidator.getReport(validationResults));
+      
+      if (!options.force && validationResults.summary.errors > 0) {
+        throw new AtomixCLIError(
+          'Token validation failed with errors',
+          'VALIDATION_FAILED',
+          [
+            'Fix the validation errors listed above',
+            'Use --force flag to sync anyway (not recommended)'
+          ]
+        );
+      }
+    } else {
+      spinner.succeed(`Successfully synced ${countTokens(loadedTokens)} tokens from ${sourceConfig.name}`);
+    }
+
+    // Export tokens to desired formats
+    if (options.output) {
+      await exportTokens(options.output, loadedTokens);
+    }
+
+    // Show summary
+    showSyncSummary(loadedTokens, validationResults, sourceConfig);
+
+  } catch (error) {
+    spinner.fail('Token sync failed');
+    
+    if (error instanceof AtomixCLIError) {
+      throw error;
+    }
+    
+    throw new AtomixCLIError(
+      `Failed to sync tokens: ${error.message}`,
+      'SYNC_FAILED',
+      [
+        'Check that the token file is valid JSON',
+        'Ensure you have read permissions for the file',
+        'Try validating the file manually'
+      ]
+    );
+  }
+}
+
+/**
+ * Export tokens to multiple formats
+ * @private
+ */
+async function exportTokens(outputDir, tokens) {
+  const exports = [];
+
+  // Export to JSON
+  const jsonPath = join(outputDir, 'tokens.json');
+  const jsonContent = tokenProvider.exportTokens(TOKEN_FORMATS.JSON, { pretty: true });
+  await filesystem.writeFile(jsonPath, jsonContent, 'utf8');
+  exports.push(jsonPath);
+
+  // Export to CSS
+  const cssPath = join(outputDir, 'tokens.css');
+  const cssContent = tokenProvider.exportTokens(TOKEN_FORMATS.CSS, { selector: ':root' });
+  await filesystem.writeFile(cssPath, cssContent, 'utf8');
+  exports.push(cssPath);
+
+  logger.debug(`Exported tokens to: ${exports.join(', ')}`);
+}
+
+/**
+ * Count total tokens across all categories
+ * @private
+ */
+function countTokens(tokens) {
+  let count = 0;
+  for (const category of Object.values(tokens)) {
+    count += Object.keys(category).length;
+  }
+  return count;
+}
+
+/**
+ * Display sync summary
+ * @private
+ */
+function showSyncSummary(tokens, validation, source) {
+  const totalTokens = countTokens(tokens);
+  const categories = Object.keys(tokens);
+
+  const summary = `
+✅ Token Sync Complete
+
+Source: ${source.name}
+Total Tokens: ${totalTokens}
+Categories: ${categories.join(', ')}
+
+Validation:
+  Errors:   ${validation.summary.errors}
+  Warnings: ${validation.summary.warnings}
+  Info:     ${validation.summary.info}
+
+Next Steps:
+  • Review validation warnings with \`atomix validate tokens\`
+  • Export tokens with \`atomix build-theme\`
+  • Use tokens in components with \`atomix generate component\`
+  `.trim();
+
+  logger.box(summary);
+}
+
+/**
+ * Interactive mode for token sync
+ * @private
+ */
+export async function interactiveSync() {
+  logger.info('🔄 Interactive Token Sync\n');
+  
+  // In a full implementation, this would use inquirer to prompt for:
+  // 1. Source selection (Figma, Style Dictionary, etc.)
+  // 2. File path
+  // 3. Export options
+  // 4. Validation preferences
+  
+  logger.info('Interactive mode coming soon!');
+  logger.info('For now, use: atomix sync-tokens <source> --file <path>\n');
+}

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

@@ -0,0 +1,248 @@
+/**
+ * Atomix CLI Theme Bridge Command
+ * Syncs design tokens with theme providers (Tailwind, CSS-in-JS, CSS Variables)
+ */
+
+import { join } from 'path';
+import chalk from 'chalk';
+import { Command } from 'commander';
+import { 
+  createThemePackage,
+  syncToTailwind,
+  syncToCssInJs,
+  syncToCssVariables,
+  validateThemeSync,
+  THEME_PROVIDERS
+} from '../internal/theme-bridge.js';
+import { filesystem } from '../internal/filesystem.js';
+import { AtomixCLIError } from '../utils/error.js';
+import { detectFramework } from '../utils/detector.js';
+
+export const SYNC_PROVIDERS = {
+  TAILWIND: 'tailwind',
+  EMOTION: 'emotion',
+  STYLED_COMPONENTS: 'styled-components',
+  VANILLA_EXTRACT: 'vanilla-extract',
+  CSS_VARIABLES: 'css-variables'
+};
+
+/**
+ * Execute theme bridge synchronization (exported for CLI integration)
+ * @param {string} source - Source tokens file path
+ * @param {Object} options - Command options
+ */
+export async function themeBridgeAction(source = './design-tokens/tokens.json', options = {}) {
+  await executeThemeBridge(source, options);
+}
+
+/**
+ * Creates the theme-bridge command
+ * @param {Command} program - Commander program instance
+ */
+export function createThemeBridgeCommand(program) {
+  const cmd = program
+    .command('theme-bridge')
+    .description('Sync design tokens with theme providers')
+    .argument('[source]', 'Path to design tokens file', './design-tokens/tokens.json')
+    .option('-o, --output <dir>', 'Output directory for theme files', './src/theme')
+    .option('-f, --format <format>', 'Theme format (tailwind, emotion, styled-components, vanilla-extract, css-variables, all)', 'all')
+    .option('--prefix <prefix>', 'CSS variable prefix', 'atomix')
+    .option('--selector <selector>', 'CSS selector for variables', ':root')
+    .option('--no-typescript', 'Skip TypeScript type generation')
+    .option('--validate', 'Validate generated theme files')
+    .option('--dry-run', 'Show what would be generated without writing files')
+    .action(async (source, options) => {
+      try {
+        await executeThemeBridge(source, options);
+      } catch (error) {
+        if (error instanceof AtomixCLIError) {
+          console.error(chalk.red('\nTheme bridge failed:'));
+          console.error(chalk.yellow(error.message));
+          if (error.suggestions?.length) {
+            console.error(chalk.dim('\nSuggestions:'));
+            error.suggestions.forEach(s => console.error(`  - ${s}`));
+          }
+          process.exit(1);
+        }
+        throw error;
+      }
+    });
+
+  return cmd;
+}
+
+/**
+ * Execute theme bridge synchronization
+ * @param {string} source - Source tokens file path
+ * @param {Object} options - Command options
+ */
+async function executeThemeBridge(source, options) {
+  const { output, format, prefix, selector, typescript, validate, dryRun } = options;
+  
+  // Set dry run mode
+  if (dryRun) {
+    process.env.ATOMIX_DRY_RUN = 'true';
+  }
+
+  console.log(chalk.cyan('\n🎨 Atomix Theme Bridge\n'));
+  
+  // Resolve paths
+  const tokenPath = join(process.cwd(), source);
+  const outputDir = join(process.cwd(), output);
+  
+  // Check if source file exists
+  const exists = await filesystem.exists(tokenPath);
+  if (!exists) {
+    throw new AtomixCLIError(
+      `Design tokens file not found: ${tokenPath}`,
+      'TOKEN_FILE_NOT_FOUND',
+      [
+        'Run `atomix init` to create design tokens',
+        'Check the source path is correct',
+        'Ensure tokens file has been created'
+      ]
+    );
+  }
+
+  console.log(chalk.bold('Source:'), tokenPath);
+  console.log(chalk.bold('Output:'), outputDir);
+  console.log(chalk.bold('Format:'), format);
+  console.log();
+
+  // Generate theme package or single format
+  let result;
+  
+  if (format === 'all' || !format) {
+    result = await createThemePackage(tokenPath, outputDir, {
+      prefix,
+      selector,
+      typescript: typescript !== false
+    });
+  } else if (format === 'tailwind') {
+    const outputPath = join(outputDir, 'tailwind.theme.js');
+    result = await syncToTailwind(tokenPath, outputPath);
+  } else if (['emotion', 'styled-components'].includes(format)) {
+    const outputPath = join(outputDir, 'theme.ts');
+    result = await syncToCssInJs(tokenPath, outputPath, format);
+  } else if (format === 'vanilla-extract') {
+    const outputPath = join(outputDir, 'theme.ts');
+    result = await syncToCssInJs(tokenPath, outputPath, 'vanilla-extract');
+  } else if (format === 'css-variables') {
+    const outputPath = join(outputDir, 'variables.css');
+    result = await syncToCssVariables(tokenPath, outputPath, { prefix, selector });
+  } else {
+    throw new AtomixCLIError(
+      `Unknown format: ${format}`,
+      'UNKNOWN_FORMAT',
+      ['Use: tailwind, emotion, styled-components, vanilla-extract, css-variables, or all']
+    );
+  }
+
+  // Display results
+  if (dryRun) {
+    console.log(chalk.yellow('\n[DRY RUN] Files that would be created:'));
+    result.created.forEach(file => console.log(`  ${file}`));
+  } else {
+    console.log(chalk.green('\n✓ Theme synchronization complete!\n'));
+    console.log(chalk.bold('Created files:'));
+    result.created.forEach(file => console.log(`  ${chalk.cyan(file)}`));
+    
+    if (result.formats) {
+      console.log(chalk.bold('\nFormats generated:'));
+      result.formats.forEach(f => console.log(`  ${chalk.cyan(f)}`));
+    }
+    
+    console.log(chalk.bold('\nTokens synced:'), result.tokensSynced);
+  }
+
+  // Validate if requested
+  if (validate && !dryRun) {
+    console.log(chalk.cyan('\n🔍 Validating theme files...\n'));
+    
+    for (const file of result.created) {
+      const provider = detectProviderFromFile(file);
+      const validation = await validateThemeSync(tokenPath, file, provider);
+      
+      if (validation.valid) {
+        console.log(chalk.green(`  ✓ ${file}`));
+      } else {
+        console.log(chalk.yellow(`  ⚠ ${file}`));
+        validation.issues.forEach(issue => {
+          const icon = issue.severity === 'error' ? '✗' : '⚠';
+          console.log(chalk.dim(`    ${icon} ${issue.message}`));
+        });
+      }
+    }
+    
+    console.log();
+  }
+
+  // Show usage instructions
+  showUsageInstructions(format, outputDir);
+}
+
+/**
+ * Detect theme provider from file path/extension
+ * @param {string} filePath - Path to theme file
+ * @returns {string} Provider type
+ */
+function detectProviderFromFile(filePath) {
+  if (filePath.includes('tailwind')) return 'tailwind';
+  if (filePath.endsWith('.css')) return 'css-variables';
+  if (filePath.includes('vanilla-extract')) return 'vanilla-extract';
+  if (filePath.includes('emotion')) return 'emotion';
+  if (filePath.includes('styled-components')) return 'styled-components';
+  return 'css-in-js';
+}
+
+/**
+ * Show usage instructions for different theme providers
+ * @param {string} format - Generated format
+ * @param {string} outputDir - Output directory
+ */
+function showUsageInstructions(format, outputDir) {
+  console.log(chalk.bold('\n📚 Usage Instructions:\n'));
+
+  if (format === 'all' || format === 'tailwind') {
+    console.log(chalk.cyan('Tailwind CSS:'));
+    console.log(chalk.dim('  // tailwind.config.js'));
+    console.log(chalk.dim('  module.exports = {'));
+    console.log(chalk.dim('    presets: [require(\'./src/theme/tailwind.theme\')],'));
+    console.log(chalk.dim('  };'));
+    console.log();
+  }
+
+  if (format === 'all' || format === 'emotion') {
+    console.log(chalk.cyan('Emotion:'));
+    console.log(chalk.dim('  import { ThemeProvider } from \'@emotion/react\';'));
+    console.log(chalk.dim('  import { theme } from \'./src/theme/theme\';'));
+    console.log(chalk.dim('  '));
+    console.log(chalk.dim('  function App() {'));
+    console.log(chalk.dim('    return <ThemeProvider theme={theme}>...</ThemeProvider>;'));
+    console.log(chalk.dim('  }'));
+    console.log();
+  }
+
+  if (format === 'all' || format === 'css-variables') {
+    console.log(chalk.cyan('CSS Variables:'));
+    console.log(chalk.dim('  // Import in your main CSS file'));
+    console.log(chalk.dim('  @import \'./src/theme/variables.css\';'));
+    console.log(chalk.dim('  '));
+    console.log(chalk.dim('  // Use in components'));
+    console.log(chalk.dim('  color: var(--atomix-primary);'));
+    console.log(chalk.dim('  padding: var(--atomix-space-md);'));
+    console.log();
+  }
+
+  if (format === 'all' || format === 'vanilla-extract') {
+    console.log(chalk.cyan('Vanilla Extract:'));
+    console.log(chalk.dim('  import { style } from \'@vanilla-extract/css\';'));
+    console.log(chalk.dim('  import { theme } from \'./src/theme/theme.css\';'));
+    console.log(chalk.dim('  '));
+    console.log(chalk.dim('  const myStyle = style({'));
+    console.log(chalk.dim('    color: theme.colors.primary,'));
+    console.log(chalk.dim('    padding: theme.space.md'));
+    console.log(chalk.dim('  });'));
+    console.log();
+  }
+}

package/scripts/cli/commands/tokens.js

@@ -0,0 +1,157 @@
+/**
+ * Atomix CLI Tokens Command
+ * Design token management and export
+ */
+
+import inquirer from 'inquirer';
+import { logger } from '../utils/logger.js';
+import { listTokens, exportTokens } from '../token-manager.js';
+import { tokenEngine } from '../internal/tokens/engine.js';
+import { isNonInteractive } from '../utils/helpers.js';
+import { AtomixCLIError, ErrorCategory } from '../utils/error.js';
+import chalk from 'chalk';
+
+const SUPPORTED_PROVIDER_TYPES = 'figma, style-dictionary, w3c';
+
+/**
+ * Get provider for pull/push: from options, or prompt in interactive mode, or throw
+ * @param {object} options - Command options
+ * @param {string} subcommand - 'pull' | 'push'
+ * @returns {Promise<string>} - Provider name
+ */
+async function resolveProvider(options, subcommand) {
+  if (options.provider) return options.provider;
+
+  const names = tokenEngine.getProviderNames();
+  const message = names.length === 0
+    ? `No token providers configured. Add tokenEngine.providers in atomix.config. Supported types: ${SUPPORTED_PROVIDER_TYPES}.`
+    : `Missing required option: --provider. Supported (from config): ${names.join(', ')}. Use --provider <name>.`;
+
+  if (isNonInteractive() || !process.stdin.isTTY) {
+    throw new AtomixCLIError(message, ErrorCategory.CONFIG, [
+      'Set --provider <name> or configure tokenEngine.providers in atomix.config.'
+    ]);
+  }
+
+  if (names.length === 0) {
+    throw new AtomixCLIError(message, ErrorCategory.CONFIG, [
+      'Add tokenEngine.providers in atomix.config. Supported types: figma, style-dictionary, w3c.'
+    ]);
+  }
+
+  const { provider } = await inquirer.prompt([
+    {
+      type: 'list',
+      name: 'provider',
+      message: `Select provider for ${subcommand}:`,
+      choices: names
+    }
+  ]);
+  return provider;
+}
+
+/**
+ * Action for the `atomix tokens` command
+ * @param {string} subcommand - list | export | pull | push
+ * @param {object} options - Command options
+ */
+export async function tokensAction(subcommand, options = {}) {
+  // Initialize token engine
+  await tokenEngine.initialize();
+
+  switch (subcommand) {
+    case 'list':
+      await listTokensAction(options);
+      break;
+    case 'export':
+      await exportTokensAction(options);
+      break;
+    case 'pull': {
+      const provider = await resolveProvider(options, 'pull');
+      if (!provider) break;
+      await pullTokensAction(provider, options);
+      break;
+    }
+    case 'push': {
+      const provider = await resolveProvider(options, 'push');
+      if (!provider) break;
+      await pushTokensAction(provider, options);
+      break;
+    }
+    default:
+      throw new AtomixCLIError(
+        `Unknown subcommand: ${subcommand}. Available: list, export, pull, push`,
+        ErrorCategory.VALIDATION,
+        ['Use one of: atomix tokens list | export | pull | push']
+      );
+  }
+}
+
+/**
+ * Pull tokens from a provider
+ */
+async function pullTokensAction(provider, options) {
+  try {
+    const tokens = await tokenEngine.pull(provider);
+    logger.box(`Tokens pulled successfully from ${provider}!\nSource: ${tokens.source}\nTokens: ${Object.keys(tokens.tokens).join(', ')}`);
+  } catch (error) {
+    throw new AtomixCLIError(
+      error.message || `Token pull failed`,
+      ErrorCategory.CONFIG,
+      ['Check tokenEngine.providers in atomix.config and network access.']
+    );
+  }
+}
+
+/**
+ * Push tokens to a provider
+ */
+async function pushTokensAction(provider, options) {
+  try {
+    const localTokens = {};
+    const success = await tokenEngine.push(provider, localTokens);
+    if (success) {
+      logger.succeed(`Tokens pushed successfully to ${provider}`);
+    } else {
+      throw new AtomixCLIError(
+        'Token push failed',
+        ErrorCategory.CONFIG,
+        ['Check provider configuration and credentials.']
+      );
+    }
+  } catch (error) {
+    if (error instanceof AtomixCLIError) throw error;
+    throw new AtomixCLIError(
+      error.message || 'Token push failed',
+      ErrorCategory.CONFIG,
+      ['Check tokenEngine.providers in atomix.config.']
+    );
+  }
+}
+
+/**
+ * List all tokens
+ */
+async function listTokensAction(options) {
+  try {
+    // listTokens already logs everything
+    await listTokens();
+  } catch (error) {
+    logger.error(`Failed to list tokens: ${error.message}`);
+  }
+}
+
+/**
+ * Export tokens
+ */
+async function exportTokensAction(options) {
+  const format = options.format || 'css';
+  const outputPath = options.output || './tokens';
+  
+  try {
+    // exportTokens already logs everything
+    await exportTokens(format, outputPath);
+  } catch (error) {
+    logger.error(`Token export failed: ${error.message}`);
+  }
+}