@shohojdhara/atomix 0.3.14 → 0.4.0

package/scripts/cli/component-generator.js

@@ -5,9 +5,9 @@
 
 import inquirer from 'inquirer';
 import chalk from 'chalk';
-import { readFile, writeFile, mkdir, access } from 'fs/promises';
+import { readFile, writeFile, mkdir } from 'fs/promises';
 import { existsSync } from 'fs';
-import { join, dirname, basename } from 'path';
+import { join } from 'path';
 import ora from 'ora';
 import boxen from 'boxen';
 
@@ -15,7 +15,6 @@ import {
   validatePath,
   validateComponentName,
   sanitizeInput,
-  fileExists,
   AtomixCLIError
 } from './utils.js';
 import { componentTemplates } from './templates.js';
@@ -112,239 +111,21 @@ export const COMPONENT_FEATURES = {
  * Simple component template
  */
 function getSimpleTemplate(name) {
-  return `import React from 'react';
-import type { ${name}Props } from './${name}.types';
-
-/**
- * ${name} - Simple Presentational Component
- * 
- * A basic component for rendering content with minimal overhead.
- */
-export const ${name} = ({ children, className, ...props }: ${name}Props) => {
-  return (
-    <div className={\`c-${name.toLowerCase()} \${className || ''}\`} {...props}>
-      {children}
-    </div>
-  );
-};
-
-${name}.displayName = '${name}';
-`;
+  return componentTemplates.react.simple(name);
 }
 
 /**
  * Medium component template
  */
 function getMediumTemplate(name) {
-  return `import React, { useState, useCallback } from 'react';
-import { cn } from '../../lib/utils';
-import type { ${name}Props, ${name}State } from './${name}.types';
-import { use${name} } from '../../lib/composables/use${name}';
-
-/**
- * ${name} - Component with State and Interactions
- * 
- * A component with internal state management and event handling.
- */
-export const ${name} = React.forwardRef<HTMLDivElement, ${name}Props>(
-  ({ 
-    children, 
-    className, 
-    defaultOpen = false,
-    onOpenChange,
-    disabled = false,
-    ...props 
-  }, ref) => {
-    const { 
-      isOpen, 
-      toggle, 
-      setIsOpen 
-    } = use${name}({
-      defaultOpen,
-      onOpenChange
-    });
-
-    const handleKeyDown = useCallback((e: React.KeyboardEvent) => {
-      if (disabled) return;
-      
-      switch (e.key) {
-        case 'Enter':
-        case ' ':
-          e.preventDefault();
-          toggle();
-          break;
-        case 'Escape':
-          setIsOpen(false);
-          break;
-      }
-    }, [disabled, toggle, setIsOpen]);
-
-    return (
-      <div
-        ref={ref}
-        className={cn(
-          'c-' + '${name.toLowerCase()}',
-          isOpen && 'is-open',
-          disabled && 'is-disabled',
-          className
-        )}
-        data-state={isOpen ? 'open' : 'closed'}
-        data-disabled={disabled}
-        onKeyDown={handleKeyDown}
-        tabIndex={disabled ? -1 : 0}
-        role="button"
-        aria-pressed={isOpen}
-        aria-disabled={disabled}
-        {...props}
-      >
-        {children}
-      </div>
-    );
-  }
-);
-
-${name}.displayName = '${name}';
-`;
+  return componentTemplates.react.medium(name);
 }
 
 /**
  * Complex component template
  */
 function getComplexTemplate(name) {
-  return `import React, { useState, useCallback, useEffect, useRef } from 'react';
-import { cn } from '../../lib/utils';
-import type { ${name}Props, ${name}ContextValue } from './${name}.types';
-import { use${name} } from '../../lib/composables/use${name}';
-import { ${name}Context } from './${name}.context';
-
-/**
- * ${name} - Advanced Component with Context and Animations
- * 
- * A feature-rich component with context integration, animations,
- * accessibility, and validation.
- */
-
-// Root Component
-export const ${name} = React.forwardRef<HTMLDivElement, ${name}Props>(
-  ({ 
-    children, 
-    className, 
-    defaultOpen = false,
-    onOpenChange,
-    disabled = false,
-    required = false,
-    validate,
-    animation = true,
-    ...props 
-  }, ref) => {
-    const [isOpen, setIsOpen] = useState(defaultOpen);
-    const [isValid, setIsValid] = useState(true);
-    const [validationMessage, setValidationMessage] = useState('');
-    const elementRef = useRef<HTMLDivElement>(null);
-
-    const toggle = useCallback(() => {
-      if (disabled) return;
-      
-      const newState = !isOpen;
-      
-      // Validation before opening
-      if (newState && validate) {
-        const result = validate();
-        setIsValid(result.valid);
-        setValidationMessage(result.message || '');
-        
-        if (!result.valid) {
-          return;
-        }
-      }
-      
-      setIsOpen(newState);
-      onOpenChange?.(newState);
-    }, [isOpen, disabled, validate, onOpenChange]);
-
-    const contextValue: ${name}ContextValue = React.useMemo(() => ({
-      isOpen,
-      toggle,
-      setIsOpen,
-      disabled,
-      required,
-      isValid,
-      validationMessage
-    }), [isOpen, toggle, disabled, required, isValid, validationMessage]);
-
-    // Focus management
-    useEffect(() => {
-      if (isOpen && elementRef.current) {
-        elementRef.current.focus();
-      }
-    }, [isOpen]);
-
-    // Keyboard navigation
-    const handleKeyDown = useCallback((e: React.KeyboardEvent) => {
-      if (disabled) return;
-      
-      switch (e.key) {
-        case 'Enter':
-        case ' ':
-          e.preventDefault();
-          toggle();
-          break;
-        case 'Escape':
-          setIsOpen(false);
-          break;
-        case 'ArrowDown':
-          if (isOpen) e.preventDefault();
-          break;
-      }
-    }, [disabled, isOpen, toggle]);
-
-    return (
-      <${name}Context.Provider value={contextValue}>
-        <div
-          ref={(node) => {
-            elementRef.current = node;
-            if (typeof ref === 'function') ref(node);
-            else if (ref) ref.current = node;
-          }}
-          className={cn(
-            'c-${name.toLowerCase()}',
-            isOpen && 'is-open',
-            disabled && 'is-disabled',
-            !isValid && 'is-invalid',
-            animation && 'has-animation',
-            className
-          )}
-          data-state={isOpen ? 'open' : 'closed'}
-          data-disabled={disabled}
-          data-valid={isValid}
-          onKeyDown={handleKeyDown}
-          role="region"
-          aria-expanded={isOpen}
-          aria-disabled={disabled}
-          aria-invalid={!isValid}
-          aria-describedby={!isValid ? \`${name.toLowerCase()}-error\` : undefined}
-          {...props}
-        >
-          {children}
-          
-          {!isValid && validationMessage && (
-            <div 
-              id={\`${name.toLowerCase()}-error\`}
-              className="c-${name.toLowerCase()}__error"
-              role="alert"
-              aria-live="polite"
-            >
-              {validationMessage}
-            </div>
-          )}
-        </div>
-      </${name}Context.Provider>
-    );
-  }
-);
-
-${name}.displayName = '${name}';
-`;
+  return componentTemplates.react.complex(name);
 }
 
 /**
@@ -380,81 +161,246 @@ export function generateComponentByComplexity(name, complexity, options = {}) {
  * Interactive component generation
  */
 export async function interactiveComponentGeneration() {
-  console.log(boxen(
-    chalk.bold.cyan('🎨 Interactive Component Generator\n\n') +
-    chalk.gray('Let\'s create a new component for your design system'),
-    {
-      padding: 1,
-      margin: 1,
-      borderStyle: 'round',
-      borderColor: 'cyan'
-    }
-  ));
-
-  // Step 1: Component name
-  const { componentName } = await inquirer.prompt([
-    {
-      type: 'input',
-      name: 'componentName',
-      message: 'What is your component name?',
-      validate: (input) => {
-        const validation = validateComponentName(input);
-        return validation.isValid || validation.error;
-      },
-      filter: (input) => sanitizeInput(input)
-    }
-  ]);
-
-  // Step 2: Complexity level
-  const { complexity } = await inquirer.prompt([
-    {
-      type: 'list',
-      name: 'complexity',
-      message: 'What is the complexity level?',
-      choices: Object.values(COMPLEXITY_LEVELS).map(level => ({
-        name: `${chalk.bold(level.name.charAt(0).toUpperCase() + level.name.slice(1))} - ${level.description}`,
-        value: level.name,
-        short: level.name
-      })),
-      default: 'medium'
-    }
-  ]);
-
-  // Step 3: Features
-  const { features } = await inquirer.prompt([
-    {
-      type: 'checkbox',
-      name: 'features',
-      message: 'Select features to include:',
-      choices: Object.values(COMPONENT_FEATURES).map(feature => ({
-        name: `${feature.description}`,
-        value: feature.name,
-        checked: feature.default
-      }))
-    }
-  ]);
-
-  // Step 4: Output path
-  const { outputPath } = await inquirer.prompt([
-    {
-      type: 'input',
-      name: 'outputPath',
-      message: 'Output directory:',
-      default: './src/components',
-      validate: (input) => {
-        const validation = validatePath(sanitizeInput(input));
-        return validation.isValid || validation.error;
-      },
-      filter: (input) => sanitizeInput(input)
+  try {
+    console.log(boxen(
+      chalk.bold.cyan('🎨 Interactive Component Generator\n\n') +
+      chalk.gray('Let\'s create a new component for your design system'),
+      {
+        padding: 1,
+        margin: 1,
+        borderStyle: 'round',
+        borderColor: 'cyan'
+      }
+    ));
+
+    // Step 1: Component name
+    const { componentName } = await inquirer.prompt([
+      {
+        type: 'input',
+        name: 'componentName',
+        message: 'What is your component name?',
+        validate: (input) => {
+          const validation = validateComponentName(input);
+          return validation.isValid || validation.error;
+        },
+        filter: (input) => sanitizeInput(input)
+      }
+    ]);
+
+    // Step 2: Complexity level
+    const { complexity } = await inquirer.prompt([
+      {
+        type: 'list',
+        name: 'complexity',
+        message: 'What is the complexity level?',
+        choices: Object.values(COMPLEXITY_LEVELS).map(level => ({
+          name: `${chalk.bold(level.name.charAt(0).toUpperCase() + level.name.slice(1))} - ${level.description}`,
+          value: level.name,
+          short: level.name
+        })),
+        default: 'medium'
+      }
+    ]);
+
+    // Step 3: Features
+    const { features } = await inquirer.prompt([
+      {
+        type: 'checkbox',
+        name: 'features',
+        message: 'Select features to include:',
+        choices: Object.values(COMPONENT_FEATURES).map(feature => ({
+          name: `${feature.description}`,
+          value: feature.name,
+          checked: feature.default
+        }))
+      }
+    ]);
+
+    // Step 4: Output path
+    const { outputPath } = await inquirer.prompt([
+      {
+        type: 'input',
+        name: 'outputPath',
+        message: 'Output directory:',
+        default: './src/components',
+        validate: (input) => {
+          const validation = validatePath(sanitizeInput(input));
+          return validation.isValid || validation.error;
+        },
+        filter: (input) => sanitizeInput(input)
+      }
+    ]);
+
+    return {
+      name: componentName,
+      complexity,
+      features,
+      outputPath
+    };
+  } catch (error) {
+    if (error.message === 'User cancelled') {
+      return null;
     }
-  ]);
+    throw error;
+  }
+}
 
-  return {
-    name: componentName,
-    complexity,
-    features,
-    outputPath
-  };
+/**
+ * Generate all component files
+ */
+export async function generateComponentFiles(name, options = {}) {
+  const { 
+    outputPath = './src/components',
+    complexity = 'medium',
+    features = [],
+    spinner
+  } = options;
+
+  const componentPath = join(outputPath, name);
+  
+  // Create component directory
+  await mkdir(componentPath, { recursive: true });
+
+  // Determine if we need to generate a composable hook
+  const hasComposable = features.includes('HOOK') || COMPONENT_FEATURES.HOOK.default;
+  
+  // Determine if we need glass effect
+  const hasGlass = features.includes('STYLES') || COMPONENT_FEATURES.STYLES.default;
+
+  // Generate main component file
+  const componentContent = generateComponentByComplexity(name, complexity, {
+    hasComposable,
+    hasGlass
+  });
+  
+  await writeFile(
+    join(componentPath, `${name}.tsx`),
+    componentContent
+  );
+
+  if (spinner) spinner.text = `Generating ${name}.tsx...`;
+
+  // Generate index file
+  const indexContent = componentTemplates.react.index(name);
+  await writeFile(
+    join(componentPath, 'index.ts'),
+    indexContent
+  );
+
+  if (spinner) spinner.text = `Generating index.ts...`;
+
+  // Generate storybook file if feature is enabled
+  if (features.includes('storybook') || COMPONENT_FEATURES.STORYBOOK.default) {
+    const storyContent = componentTemplates.react.story(name);
+    await writeFile(
+      join(componentPath, `${name}.stories.tsx`),
+      storyContent
+    );
+    
+    if (spinner) spinner.text = `Generating ${name}.stories.tsx...`;
+  }
+
+  // Generate test file if feature is enabled
+  if (features.includes('tests') || COMPONENT_FEATURES.TESTS.default) {
+    const testContent = componentTemplates.react.test(name);
+    await writeFile(
+      join(componentPath, `${name}.test.tsx`),
+      testContent
+    );
+    
+    if (spinner) spinner.text = `Generating ${name}.test.tsx...`;
+  }
+
+  // Generate composable hook if feature is enabled
+  if (hasComposable) {
+    const composableDir = join(outputPath, '..', 'lib', 'composables');
+    await mkdir(composableDir, { recursive: true });
+    
+    const composableContent = componentTemplates.composable.useHook(name);
+    await writeFile(
+      join(composableDir, `use${name}.ts`),
+      composableContent
+    );
+    
+    if (spinner) spinner.text = `Generating use${name}.ts...`;
+  }
+
+  // Generate constants and types if TypeScript feature is enabled
+  if (features.includes('typescript') || COMPONENT_FEATURES.TYPESCRIPT.default) {
+    // Note: In a real implementation, we'd append to existing files rather than overwrite
+    // This is simplified for demonstration purposes
+    const constantsContent = componentTemplates.types.constants(name);
+    const typesContent = componentTemplates.types.types(name);
+    
+    // In a real scenario, these would be appended to existing files
+    // For now, we'll just show what would be added
+    console.log(chalk.blue(`\n💡 Remember to add these to the appropriate files:`));
+    console.log(chalk.gray(`Constants to src/lib/constants/components.ts:`));
+    console.log(chalk.gray(constantsContent.substring(0, 100) + '...'));
+    console.log(chalk.gray(`Types to src/lib/types/components.ts:`));
+    console.log(chalk.gray(typesContent.substring(0, 100) + '...'));
+  }
+
+  // Generate SCSS files if styles feature is enabled
+  if (features.includes('styles') || COMPONENT_FEATURES.STYLES.default) {
+    const stylesBasePath = join(outputPath, '..', 'styles');
+    
+    // Create settings file
+    const settingsPath = join(stylesBasePath, '01-settings');
+    await mkdir(settingsPath, { recursive: true });
+    
+    const settingsContent = componentTemplates.scss.settings(name);
+    await writeFile(
+      join(settingsPath, `_settings.${name.toLowerCase()}.scss`),
+      settingsContent
+    );
+    
+    if (spinner) spinner.text = `Generating _settings.${name.toLowerCase()}.scss...`;
+    
+    // Create components file
+    const componentsPath = join(stylesBasePath, '06-components');
+    await mkdir(componentsPath, { recursive: true });
+    
+    const componentStylesContent = componentTemplates.scss.component(name);
+    await writeFile(
+      join(componentsPath, `_components.${name.toLowerCase()}.scss`),
+      componentStylesContent
+    );
+    
+    if (spinner) spinner.text = `Generating _components.${name.toLowerCase()}.scss...`;
+  }
+
+  return componentPath;
+}
+
+/**
+ * Generate a new component
+ */
+export async function generateComponent(options) {
+  const { name, complexity, features, outputPath } = options;
+  
+  const spinner = ora({
+    text: chalk.blue('Generating component...'),
+    spinner: 'clock'
+  });
+  
+  try {
+    spinner.start();
+    
+    const componentPath = await generateComponentFiles(name, {
+      complexity,
+      features,
+      outputPath,
+      spinner
+    });
+    
+    spinner.succeed(chalk.green(`Component ${name} generated successfully!\n${chalk.gray('Location:')} ${componentPath}`));
+    
+    return componentPath;
+  } catch (error) {
+    spinner.fail(chalk.red(`Failed to generate component: ${error.message}`));
+    throw error;
+  }
 }
 
 /**
@@ -504,6 +450,15 @@ export async function validateGeneratedComponent(name, componentPath) {
         suggestion: 'Add ARIA attributes and roles for better accessibility'
       });
     }
+    
+    // Check for hardcoded styles
+    if (content.match(/#[0-9a-fA-F]{3,6}|rgb\(|rgba\(/)) {
+      warnings.push({
+        file: `${name}.tsx`,
+        issue: 'Using hardcoded values instead of design tokens',
+        suggestion: 'Use design tokens (e.g., var(--color-primary)) or utility classes'
+      });
+    }
   } else {
     issues.push({
       file: `${name}.tsx`,
@@ -513,7 +468,6 @@ export async function validateGeneratedComponent(name, componentPath) {
   }
   
   // Check for SCSS file
-  const scssFile = join(componentPath, `${name}.scss`);
   if (existsSync(componentPath)) {
     // Check in styles directory
     const globalScss = join(process.cwd(), 'src/styles/06-components', `_components.${name.toLowerCase()}.scss`);
@@ -592,7 +546,7 @@ export function displayValidationReport(result) {
     console.log(chalk.bold.yellow(`\n⚠️  Found ${result.warnings.length} warning(s):\n`));
     result.warnings.forEach((warning, index) => {
       console.log(chalk.yellow(`  ${index + 1}. ${warning.file}`));
-      console.log(chalk.gray(`     Warning: ${warning.warning}`));
+      console.log(chalk.gray(`     Warning: ${warning.issue}`));
       console.log(chalk.cyan(`     Suggestion: ${warning.suggestion}\n`));
     });
   }