@shohojdhara/atomix 0.3.3 → 0.3.4

package/scripts/cli/interactive-init.js

@@ -73,7 +73,7 @@ body {
 }`
     }
   },
-  
+
   nextjs: {
     dependencies: [
       '@shohojdhara/atomix',
@@ -125,7 +125,7 @@ body {
 }`
     }
   },
-  
+
   vanilla: {
     dependencies: [
       '@shohojdhara/atomix'
@@ -203,7 +203,7 @@ const configTemplates = {
       }
     }
   },
-  
+
   advanced: {
     'atomix.config.js': `module.exports = {
   // Theme configuration
@@ -260,7 +260,7 @@ export async function runInitWizard() {
       borderColor: 'cyan'
     }
   ));
-  
+
   try {
     // Step 1: Project type
     const { projectType } = await inquirer.prompt([
@@ -276,7 +276,7 @@ export async function runInitWizard() {
         ]
       }
     ]);
-    
+
     // Step 2: Theme selection
     const { themeChoice } = await inquirer.prompt([
       {
@@ -291,27 +291,19 @@ export async function runInitWizard() {
         ]
       }
     ]);
-    
+
     let selectedTheme = null;
     if (themeChoice === 'prebuilt') {
       const { theme } = await inquirer.prompt([
         {
-          type: 'list',
+          type: 'input',
           name: 'theme',
-          message: 'Select a pre-built theme:',
-          choices: [
-            { name: 'Shaj Default - Clean & Modern', value: 'shaj-default' },
-            { name: 'FlashTrade - Crypto Trading', value: 'flashtrade' },
-            { name: 'BoomDevs - Dark Mode', value: 'boomdevs' },
-            { name: 'Esrar - Minimal Light', value: 'esrar' },
-            { name: 'Mashroom - Colorful & Playful', value: 'mashroom' },
-            { name: 'AppleMix - Glass Morphism', value: 'applemix' }
-          ]
+          message: 'Enter the name of the pre-built theme:',
         }
       ]);
       selectedTheme = theme;
     }
-    
+
     // Step 3: Features
     const { features } = await inquirer.prompt([
       {
@@ -328,7 +320,7 @@ export async function runInitWizard() {
         ]
       }
     ]);
-    
+
     // Step 4: Configuration
     const { configType } = await inquirer.prompt([
       {
@@ -342,7 +334,7 @@ export async function runInitWizard() {
         ]
       }
     ]);
-    
+
     // Step 5: Installation
     const { shouldInstall } = await inquirer.prompt([
       {
@@ -352,14 +344,14 @@ export async function runInitWizard() {
         default: true
       }
     ]);
-    
+
     // Generate files
     console.log(chalk.cyan('\n📦 Generating project files...\n'));
-    
+
     // Create project structure
     if (projectType !== 'custom') {
       const template = projectTemplates[projectType];
-      
+
       // Create directories
       await mkdir('src', { recursive: true });
       if (projectType === 'nextjs') {
@@ -370,32 +362,32 @@ export async function runInitWizard() {
       } else if (projectType === 'vanilla') {
         await mkdir('src/styles', { recursive: true });
       }
-      
+
       // Write template files
       for (const [path, content] of Object.entries(template.files)) {
         const filePath = join(process.cwd(), path);
         const dir = join(process.cwd(), path.substring(0, path.lastIndexOf('/')));
-        
+
         if (!existsSync(dir)) {
           await mkdir(dir, { recursive: true });
         }
-        
+
         await writeFile(filePath, content, 'utf8');
         console.log(chalk.green(`  ✓ Created ${path}`));
       }
     }
-    
+
     // Create configuration file
     if (configType !== 'none') {
-      const configTemplate = configType === 'json' 
-        ? configTemplates.basic 
+      const configTemplate = configType === 'json'
+        ? configTemplates.basic
         : configTemplates.advanced;
-      
+
       for (const [filename, content] of Object.entries(configTemplate)) {
-        const configContent = typeof content === 'object' 
+        const configContent = typeof content === 'object'
           ? JSON.stringify(content, null, 2)
           : content;
-        
+
         await writeFile(
           join(process.cwd(), filename),
           configContent,
@@ -404,11 +396,11 @@ export async function runInitWizard() {
         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
 
@@ -427,7 +419,7 @@ export async function runInitWizard() {
 .custom-component {
   // Custom component styles
 }`;
-      
+
       await writeFile(
         join(process.cwd(), 'themes/custom/index.scss'),
         themeContent,
@@ -435,7 +427,7 @@ export async function runInitWizard() {
       );
       console.log(chalk.green('  ✓ Created custom theme'));
     }
-    
+
     // Generate package.json scripts
     const scripts = {
       'dev': projectType === 'nextjs' ? 'next dev' : 'vite',
@@ -444,24 +436,24 @@ export async function runInitWizard() {
       'generate:component': 'atomix generate component',
       'validate': 'atomix validate --tokens --theme'
     };
-    
+
     if (features.includes('storybook')) {
       scripts['storybook'] = 'storybook dev -p 6006';
       scripts['build:storybook'] = 'storybook build';
     }
-    
+
     if (features.includes('testing')) {
       scripts['test'] = 'vitest';
       scripts['test:watch'] = 'vitest --watch';
       scripts['test:coverage'] = 'vitest --coverage';
     }
-    
+
     if (features.includes('linting')) {
       scripts['lint'] = 'eslint . --ext .ts,.tsx,.js,.jsx';
       scripts['lint:fix'] = 'eslint . --ext .ts,.tsx,.js,.jsx --fix';
       scripts['format'] = 'prettier --write "src/**/*.{ts,tsx,js,jsx,json,css,scss}"';
     }
-    
+
     // Update package.json if it exists
     const packageJsonPath = join(process.cwd(), 'package.json');
     if (existsSync(packageJsonPath)) {
@@ -473,7 +465,7 @@ export async function runInitWizard() {
           default: true
         }
       ]);
-      
+
       if (addScripts) {
         const packageJson = JSON.parse(await readFile(packageJsonPath, 'utf8'));
         packageJson.scripts = { ...packageJson.scripts, ...scripts };
@@ -481,7 +473,7 @@ export async function runInitWizard() {
         console.log(chalk.green('  ✓ Updated package.json scripts'));
       }
     }
-    
+
     // Success message
     console.log(boxen(
       chalk.bold.green('✨ Setup Complete!\n\n') +
@@ -499,12 +491,12 @@ export async function runInitWizard() {
         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!'));
@@ -513,7 +505,7 @@ export async function runInitWizard() {
         console.log(chalk.yellow('Please run: npm install'));
       }
     }
-    
+
   } catch (error) {
     if (error.isTTYError) {
       console.error(chalk.red('This environment doesn\'t support interactive prompts'));

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/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);

package/src/components/Button/Button.tsx

@@ -10,6 +10,7 @@ export type ButtonAsProp = {
   as?: ElementType;
   to?: string;
   href?: string;
+  LinkComponent?: React.ComponentType<any>;
   [key: string]: any;
 };
 
@@ -50,6 +51,7 @@ export const Button = React.memo(
         ariaControls,
         tabIndex,
         style,
+        LinkComponent,
         ...props
       },
       ref
@@ -253,6 +255,39 @@ export const Button = React.memo(
           type: undefined, 
           disabled: undefined,
         };
+        
+        // Use custom LinkComponent if provided (e.g., Next.js Link)
+        if (LinkComponent) {
+          const LinkComp = LinkComponent as React.ComponentType<any>;
+          const linkProps = {
+            ...anchorButtonProps,
+            ref: ref as React.Ref<HTMLAnchorElement>,
+            href,
+            target,
+            rel: target === '_blank' ? 'noopener noreferrer' : undefined,
+          };
+          
+          const linkElement = (
+            <LinkComp {...linkProps}>
+              {buttonContent}
+            </LinkComp>
+          );
+
+          if (glass) {
+            const defaultGlassProps = {
+              displacementScale: 20,
+              blurAmount: 0,
+              saturation: 200,
+              elasticity: 0,
+            };
+            const glassProps = glass === true ? defaultGlassProps : { ...defaultGlassProps, ...glass };
+            return <AtomixGlass {...glassProps}>{linkElement}</AtomixGlass>;
+          }
+
+          return linkElement;
+        }
+
+        // Fallback to regular anchor tag
         const anchorElement = (
           <a {...anchorButtonProps} ref={ref as React.Ref<HTMLAnchorElement>} href={href} target={target} rel={target === '_blank' ? 'noopener noreferrer' : undefined}>
             {buttonContent}
@@ -300,4 +335,4 @@ Button.displayName = 'Button';
 
 export type { ButtonProps };
 
-export default Button;
+export default Button;