@shohojdhara/atomix 0.3.12 → 0.3.14

package/scripts/cli/template-manager.js

@@ -0,0 +1,107 @@
+#!/usr/bin/env node
+
+/**
+ * Template Manager CLI
+ * Helper utility for managing Atomix CLI templates
+ */
+
+import templates from './templates/index.js';
+import { readFileSync, writeFileSync } from 'fs';
+import { resolve } from 'path';
+
+const commands = {
+  list: () => {
+    console.log('\n📦 Available Templates:\n');
+    
+    console.log('React Component Templates:');
+    Object.keys(templates.componentTemplates.react).forEach(name => {
+      console.log(`  • ${name}`);
+    });
+    
+    console.log('\nComposable Templates:');
+    Object.keys(templates.componentTemplates.composable).forEach(name => {
+      console.log(`  • ${name}`);
+    });
+    
+    console.log('\nToken Generators:');
+    Object.keys(templates).filter(k => k.startsWith('generate')).forEach(name => {
+      console.log(`  • ${name}`);
+    });
+    
+    console.log('\nProject Templates:');
+    Object.keys(templates.projectTemplates).forEach(name => {
+      console.log(`  • ${name}`);
+    });
+    
+    console.log('\nConfig Templates:');
+    Object.keys(templates.configTemplates).forEach(name => {
+      console.log(`  • ${name}`);
+    });
+    console.log();
+  },
+  
+  validate: () => {
+    console.log('\n🔍 Validating Templates...\n');
+    
+    let errors = 0;
+    
+    // Test React templates
+    try {
+      const testReact = templates.componentTemplates.react.simple('TestComponent');
+      if (!testReact.includes('export const TestComponent')) {
+        console.log('❌ React simple template failed');
+        errors++;
+      } else {
+        console.log('✅ React simple template passed');
+      }
+    } catch (err) {
+      console.log('❌ React simple template error:', err.message);
+      errors++;
+    }
+    
+    // Test token generators
+    try {
+      const colorTokens = templates.generateColorTokens();
+      if (!colorTokens.includes('$custom-primary-6')) {
+        console.log('❌ Color tokens template failed');
+        errors++;
+      } else {
+        console.log('✅ Color tokens template passed');
+      }
+    } catch (err) {
+      console.log('❌ Color tokens template error:', err.message);
+      errors++;
+    }
+    
+    console.log(`\n${errors === 0 ? '✅' : '❌'} Template validation complete (${errors} errors)\n`);
+    
+    return errors === 0;
+  },
+  
+  help: () => {
+    console.log(`
+🛠️  Template Manager - Atomix CLI
+
+Usage:
+  node template-manager.js <command>
+
+Commands:
+  list     List all available templates
+  validate Validate all templates for syntax errors
+  help     Show this help message
+
+Examples:
+  node template-manager.js list
+  node template-manager.js validate
+`);
+  }
+};
+
+const command = process.argv[2];
+
+if (commands[command]) {
+  commands[command]();
+} else {
+  console.log('Unknown command. Use "help" for available commands.');
+  commands.help();
+}

package/scripts/cli/templates/README.md

@@ -0,0 +1,123 @@
+# Templates Directory
+
+This directory contains modular templates for the Atomix CLI. The templates have been split into separate files for better maintainability and organization.
+
+## File Structure
+
+```
+templates/
+├── README.md                 # This documentation file
+├── index.js                 # Main export file that aggregates all templates
+├── react-templates.js       # React component templates (simple, medium, complex)
+├── storybook-templates.js   # Storybook story templates
+├── testing-templates.js     # Vitest testing templates
+├── scss-templates.js       # SCSS styling templates
+├── types-templates.js      # TypeScript definition templates
+├── composable-templates.js # Custom hook templates
+├── token-templates.js      # Design system token generation functions
+├── project-templates.js    # Project scaffolding templates
+└── config-templates.js     # Configuration file templates
+```
+
+## Template Categories
+
+### React Templates (`react-templates.js`)
+- **simple**: Basic presentational components with minimal state
+- **medium**: Components with state management and interactions  
+- **complex**: Advanced components with validation and accessibility
+- **component**: Default template (backward compatibility)
+
+### Storybook Templates (`storybook-templates.js`)
+- **story**: Basic Storybook story with essential controls
+- **storyEnhanced**: Enhanced story with detailed documentation and examples
+
+### Testing Templates (`testing-templates.js`)
+- **test**: Vitest test template for React components
+
+### SCSS Templates (`scss-templates.js`)
+- **scss**: Main SCSS component styles with CSS custom properties
+- **scssSettings**: SCSS settings file with component-specific variables
+- **scssModule**: Empty (CSS modules are not used by default)
+
+### TypeScript Templates (`types-templates.js`)
+- **types**: TypeScript interface definitions for component props
+- **constants**: Component constants and selectors
+- **index**: Index file for component exports
+
+### Composable Templates (`composable-templates.js`)
+- **hook**: Custom React hook template with state management and accessibility
+
+### Token Templates (`token-templates.js`)
+Design system token generation functions:
+- **generateColorTokens**: Color palette tokens
+- **generateSpacingTokens**: Spacing scale tokens
+- **generateTypographyTokens**: Typography scale tokens
+- **generateShadowTokens**: Box shadow tokens
+- **generateRadiusTokens**: Border radius tokens
+- **generateAnimationTokens**: Animation and transition tokens
+
+### Project Templates (`project-templates.js`)
+- **react**: React + Vite project setup
+- **nextjs**: Next.js project setup
+- **vanilla**: Vanilla TypeScript project setup
+
+### Config Templates (`config-templates.js`)
+- **basic**: Simple JSON configuration
+- **advanced**: Advanced JavaScript configuration with all options
+
+## Usage
+
+Templates are imported through the main `index.js` file, which maintains backward compatibility with the original `templates.js` structure.
+
+```javascript
+import templates from './templates/index.js';
+
+// Access React templates
+const simpleTemplate = templates.componentTemplates.react.simple('MyComponent');
+
+// Access token generators
+const colorTokens = templates.generateColorTokens();
+
+// Access project templates
+const reactProject = templates.projectTemplates.react;
+```
+
+## Migration from Single File
+
+The original `templates.js` file has been split for better maintainability:
+
+1. **Backup**: Original file saved as `templates-original-backup.js`
+2. **New structure**: Templates organized by category in separate files
+3. **Compatibility**: All existing imports continue to work through `index.js`
+4. **Benefits**: 
+   - Easier to locate and edit specific templates
+   - Reduced file size for better editor performance
+   - Clear separation of concerns
+   - Better testability of individual template modules
+
+## Adding New Templates
+
+1. Choose the appropriate category file or create a new one
+2. Add your template function following the existing pattern
+3. Export it in the category's export object
+4. Update `index.js` if you created a new category
+
+Example of adding a new React template:
+
+```javascript
+// In react-templates.js
+export const customTemplate = (name) => `// Your custom template code`;
+
+// Update the export object
+export const reactTemplates = {
+  simple: simpleTemplate,
+  medium: mediumTemplate,
+  complex: complexTemplate,
+  component: defaultTemplate,
+  custom: customTemplate, // New template
+};
+```
+
+## Backward Compatibility
+
+The modular structure maintains 100% backward compatibility. All existing imports and usage patterns continue to work exactly as before. The main `templates.js` file now imports from the modular structure, ensuring no breaking changes.

package/scripts/cli/templates/composable-templates.js

@@ -0,0 +1,149 @@
+/**
+ * Composable Templates
+ * Templates for custom hooks and composables
+ */
+
+/**
+ * Custom hook template for React components
+ */
+export const hookTemplate = (name) => `import { useState, useCallback, useRef, useEffect } from 'react';
+import type { ${name}Props } from '../../lib/types/components';
+
+/**
+ * Custom hook for ${name.toLowerCase()} component
+ * Provides controlled/uncontrolled state management and accessibility
+ */
+export function use${name}(initialProps?: Partial<${name}Props>) {
+  const {
+    isOpen: controlledIsOpen,
+    defaultIsOpen = false,
+    onToggle,
+    ...props
+  } = initialProps || {};
+
+  // State management for controlled/uncontrolled pattern
+  const [internalIsOpen, setInternalIsOpen] = useState(defaultIsOpen);
+  const isControlled = typeof controlledIsOpen === 'boolean';
+  const isOpen = isControlled ? controlledIsOpen : internalIsOpen;
+
+  // Refs for DOM elements
+  const triggerRef = useRef<HTMLButtonElement>(null);
+  const panelRef = useRef<HTMLDivElement>(null);
+
+  // Toggle function with controlled support
+  const toggle = useCallback(() => {
+    if (isControlled) {
+      onToggle?.(!isOpen);
+    } else {
+      setInternalIsOpen(!isOpen);
+      onToggle?.(!isOpen);
+    }
+  }, [isOpen, isControlled, onToggle]);
+
+  // Open function
+  const open = useCallback(() => {
+    if (isControlled) {
+      onToggle?.(true);
+    } else {
+      setInternalIsOpen(true);
+      onToggle?.(true);
+    }
+  }, [isControlled, onToggle]);
+
+  // Close function
+  const close = useCallback(() => {
+    if (isControlled) {
+      onToggle?.(false);
+    } else {
+      setInternalIsOpen(false);
+      onToggle?.(false);
+    }
+  }, [isControlled, onToggle]);
+
+  // Keyboard navigation
+  const handleKeyDown = useCallback((event: KeyboardEvent) => {
+    switch (event.key) {
+      case 'Enter':
+      case ' ':
+        event.preventDefault();
+        toggle();
+        break;
+      case 'Escape':
+        if (isOpen) {
+          close();
+          triggerRef.current?.focus();
+        }
+        break;
+    }
+  }, [isOpen, toggle, close]);
+
+  // Accessibility helpers
+  const getTriggerProps = useCallback(() => ({
+    ref: triggerRef,
+    'aria-expanded': isOpen,
+    'aria-controls': panelRef.current?.id,
+    onKeyDown: handleKeyDown,
+    onClick: toggle,
+  }), [isOpen, handleKeyDown, toggle]);
+
+  const getPanelProps = useCallback(() => ({
+    ref: panelRef,
+    'aria-hidden': !isOpen,
+    role: 'region',
+  }), [isOpen]);
+
+  const getHeaderProps = useCallback(() => ({
+    role: 'heading',
+    'aria-level': 3,
+  }), []);
+
+  const getContentProps = useCallback(() => ({
+    // Content-specific props
+  }), []);
+
+  // State object for external access
+  const state = {
+    isOpen,
+    isControlled,
+  };
+
+  // Set controlled state from external updates
+  const setIsOpen = useCallback((newIsOpen: boolean) => {
+    if (!isControlled) {
+      setInternalIsOpen(newIsOpen);
+    }
+  }, [isControlled]);
+
+  return {
+    // State
+    state,
+    isOpen,
+    isControlled,
+    
+    // Actions
+    toggle,
+    open,
+    close,
+    setIsOpen,
+    
+    // Props helpers
+    getTriggerProps,
+    getPanelProps,
+    getHeaderProps,
+    getContentProps,
+    
+    // Refs
+    triggerRef,
+    panelRef,
+  };
+}
+
+export default use${name};
+`;
+
+/**
+ * Composable templates object
+ */
+export const composableTemplates = {
+  hook: hookTemplate,
+};

package/scripts/cli/templates/config-templates.js

@@ -0,0 +1,126 @@
+/**
+ * Configuration Templates
+ * Templates for different configuration formats
+ */
+
+/**
+ * Basic configuration templates
+ */
+export const basicConfigTemplates = {
+  '.atomixrc.json': {
+    theme: {
+      path: 'themes/custom',
+      tokens: {
+        colors: {
+          primary: '#7AFFD7',
+          secondary: '#FF5733'
+        }
+      }
+    },
+    components: {
+      path: 'src/components',
+      generate: {
+        typescript: true,
+        stories: true,
+        tests: false
+      }
+    },
+    build: {
+      outputPath: 'dist',
+      includeSourceMaps: false
+    }
+  }
+};
+
+/**
+ * Advanced configuration template
+ */
+export const advancedConfigTemplate = `// Atomix Design System Configuration
+// Generated by Atomix CLI
+
+export default {
+  theme: {
+    path: 'themes/custom',
+    tokens: {
+      // Import custom token files
+      extend: ['./tokens/colors.scss', './tokens/spacing.scss']
+    },
+    // Theme configuration
+    darkMode: 'class', // 'class' | 'media' | false
+    cssVarPrefix: 'atomix',
+    scope: ':root'
+  },
+  
+  components: {
+    path: 'src/components',
+    // Component generation options
+    generate: {
+      typescript: true,
+      stories: true,
+      tests: true,
+      cssModules: false,
+      // Custom component templates
+      templates: {
+        component: './templates/component.tsx.hbs',
+        story: './templates/story.tsx.hbs',
+        test: './templates/test.tsx.hbs'
+      }
+    },
+    // Component scanning
+    scan: {
+      patterns: ['src/components/**/*.{ts,tsx}'],
+      exclude: ['**/*.test.*', '**/*.stories.*']
+    }
+  },
+  
+  build: {
+    outputPath: 'dist',
+    includeSourceMaps: process.env.NODE_ENV === 'development',
+    // Build optimization
+    optimization: {
+      minify: true,
+      treeshake: true,
+      purgeCSS: {
+        enabled: true,
+        content: ['src/**/*.{js,ts,tsx,html}']
+      }
+    }
+  },
+  
+  // Development server
+  devServer: {
+    port: 3000,
+    open: true,
+    hmr: true
+  },
+  
+  // Plugin configuration
+  plugins: [
+    // '@shohojdhara/atomix-plugin-storybook',
+    // '@shohojdhara/atomix-plugin-tailwind'
+  ],
+  
+  // CLI commands
+  cli: {
+    generate: {
+      component: {
+        template: 'react',
+        directory: 'src/components'
+      },
+      theme: {
+        template: 'scss',
+        directory: 'themes'
+      }
+    }
+  }
+};`;
+
+/**
+ * Configuration templates export object
+ */
+export const configTemplates = {
+  basic: basicConfigTemplates,
+  advanced: {
+    'atomix.config.js': advancedConfigTemplate
+  }
+};

package/scripts/cli/templates/index.js

@@ -0,0 +1,95 @@
+/**
+ * Templates Index
+ * Aggregates all template modules for the Atomix CLI
+ */
+
+// Import template modules
+import { reactTemplates } from './react-templates.js';
+import { storybookTemplates } from './storybook-templates.js';
+import { testingTemplates } from './testing-templates.js';
+import { scssTemplates } from './scss-templates.js';
+import { typesTemplates } from './types-templates.js';
+import { composableTemplates } from './composable-templates.js';
+import * as tokenTemplates from './token-templates.js';
+import { projectTemplates } from './project-templates.js';
+import { configTemplates } from './config-templates.js';
+
+/**
+ * Main templates object that maintains backward compatibility
+ * This structure matches the original templates.js format
+ */
+export const componentTemplates = {
+  react: {
+    ...reactTemplates,
+    ...storybookTemplates,
+    ...testingTemplates,
+    ...scssTemplates,
+    ...typesTemplates,
+  },
+  composable: composableTemplates,
+};
+
+// Re-export token generation functions
+export {
+  generateColorTokens,
+  generateSpacingTokens,
+  generateTypographyTokens,
+  generateShadowTokens,
+  generateRadiusTokens,
+  generateAnimationTokens,
+} from './token-templates.js';
+
+// Re-export project and config templates
+export { projectTemplates, configTemplates };
+
+/**
+ * Get template by name and type
+ * @param {string} type - Template type (react, composable, etc.)
+ * @param {string} name - Template name (simple, medium, complex, etc.)
+ * @returns {Function|null} Template function or null if not found
+ */
+export function getTemplate(type, name) {
+  if (type === 'react') {
+    return componentTemplates.react[name] || null;
+  } else if (type === 'composable') {
+    return componentTemplates.composable[name] || null;
+  }
+  return null;
+}
+
+/**
+ * Get all available templates for a type
+ * @param {string} type - Template type
+ * @returns {Object} Object with all available templates
+ */
+export function getTemplatesByType(type) {
+  return componentTemplates[type] || {};
+}
+
+/**
+ * List all available template types
+ * @returns {string[]} Array of template type names
+ */
+export function getTemplateTypes() {
+  return Object.keys(componentTemplates);
+}
+
+/**
+ * Legacy export for backward compatibility
+ * Maintains the same structure as the original templates.js
+ */
+export default {
+  componentTemplates,
+  generateColorTokens: tokenTemplates.generateColorTokens,
+  generateSpacingTokens: tokenTemplates.generateSpacingTokens,
+  generateTypographyTokens: tokenTemplates.generateTypographyTokens,
+  generateShadowTokens: tokenTemplates.generateShadowTokens,
+  generateRadiusTokens: tokenTemplates.generateRadiusTokens,
+  generateAnimationTokens: tokenTemplates.generateAnimationTokens,
+  projectTemplates,
+  configTemplates,
+  // Helper functions
+  getTemplate,
+  getTemplatesByType,
+  getTemplateTypes,
+};