@shohojdhara/atomix 0.4.7 → 0.4.9

package/scripts/cli/templates/types/component-types.ts

@@ -0,0 +1,145 @@
+/**
+ * Component Type Templates
+ * Templates for generating TypeScript type definitions
+ */
+
+/**
+ * Generates TypeScript type definitions for a component
+ */
+export const typesTemplate = (name: string): string => `import { ReactNode, HTMLAttributes, AriaAttributes } from 'react';
+
+/**
+ * Size variants for components
+ */
+export type ${name}Size = 'sm' | 'md' | 'lg';
+
+/**
+ * Color variants for components
+ */
+export type ${name}Variant = 'primary' | 'secondary' | 'success' | 'error' | 'warning';
+
+/**
+ * Glass effect configuration
+ */
+export interface GlassConfig {
+  displacementScale?: number;
+  blurAmount?: number;
+  saturation?: number;
+  elasticity?: number;
+}
+
+/**
+ * Props for the ${name} component
+ */
+export interface ${name}Props extends HTMLAttributes<HTMLDivElement>, AriaAttributes {
+  /** Content to be rendered inside the component */
+  children?: ReactNode;
+  
+  /** Additional CSS classes */
+  className?: string;
+  
+  /** Size variant */
+  size?: ${name}Size;
+  
+  /** Color variant */
+  variant?: ${name}Variant;
+  
+  /** Whether the component is disabled */
+  disabled?: boolean;
+  
+  /** Whether to apply glass morphism effect */
+  glass?: boolean | GlassConfig;
+  
+  /** Click handler */
+  onClick?: (event: React.MouseEvent<HTMLDivElement>) => void;
+  
+  /** Hover handler */
+  onHover?: (event: React.MouseEvent<HTMLDivElement>) => void;
+  
+  /** Focus handler */
+  onFocus?: (event: React.FocusEvent<HTMLDivElement>) => void;
+  
+  /** Blur handler */
+  onBlur?: (event: React.FocusEvent<HTMLDivElement>) => void;
+  
+  /** State change handler */
+  onStateChange?: (state: ${name}State) => void;
+}
+
+/**
+ * State interface for ${name} component
+ */
+export interface ${name}State {
+  isOpen?: boolean;
+  isActive?: boolean;
+  isSelected?: boolean;
+}
+`;
+
+/**
+ * Generates constants file for a component
+ */
+export const constantsTemplate = (name: string): string => `/**
+ * ${name} Component Constants
+ */
+
+export const ${name.toUpperCase()} = {
+  /** Base CSS class name */
+  BASE_CLASS: 'c-${name.toLowerCase()}',
+  
+  /** Class name prefixes */
+  PREFIX: 'c-${name.toLowerCase()}--',
+  
+  /** Element prefixes */
+  ELEMENT_PREFIX: '${name.toLowerCase()}__',
+  
+  /** Available sizes */
+  SIZES: ['sm', 'md', 'lg'] as const,
+  
+  /** Available variants */
+  VARIANTS: ['primary', 'secondary', 'success', 'error', 'warning'] as const,
+  
+  /** Default props */
+  DEFAULTS: {
+    SIZE: 'md' as const,
+    VARIANT: 'primary' as const,
+    DISABLED: false,
+    GLASS: false,
+  },
+  
+  /** CSS class names */
+  CLASSES: {
+    LOADING: 'is-loading',
+    DISABLED: 'is-disabled',
+    ACTIVE: 'is-active',
+    SELECTED: 'is-selected',
+    OPEN: 'is-open',
+    CLOSED: 'is-closed',
+    FOCUS: 'has-focus',
+    GLASS: 'has-glass',
+  },
+  
+  /** Data attributes */
+  DATA: {
+    STATE: 'data-state',
+    DISABLED: 'aria-disabled',
+    LOADING: 'aria-busy',
+  },
+} as const;
+
+export type ${name}Sizes = typeof ${name.toUpperCase()}.SIZES[number];
+export type ${name}Variants = typeof ${name.toUpperCase()}.VARIANTS[number];
+`;
+
+/**
+ * All type templates
+ */
+export const componentTypeTemplates = {
+  types: typesTemplate,
+  constants: constantsTemplate,
+};
+
+/**
+ * Type for component type templates object
+ */
+export type ComponentTypeTemplates = typeof componentTypeTemplates;

package/scripts/cli/templates/utils/testing-utils.ts

@@ -0,0 +1,144 @@
+/**
+ * Testing Utilities Templates
+ * Templates for generating test utilities and helpers
+ */
+
+/**
+ * Generates a test utilities file with common helpers
+ */
+export const testingUtilsTemplate = (): string => `import { render, RenderOptions, screen, waitFor } from '@testing-library/react';
+import { ReactElement, ReactNode } from 'react';
+import userEvent from '@testing-library/user-event';
+
+/**
+ * Custom render options
+ */
+interface CustomRenderOptions extends Omit<RenderOptions, 'wrapper'> {
+  wrapper?: React.ComponentType<{ children: ReactElement }>;
+  providerProps?: Record<string, any>;
+}
+
+/**
+ * Custom render function with Atomix providers
+ */
+export function renderWithProviders(
+  ui: ReactElement,
+  { wrapper: Wrapper, providerProps, ...renderOptions }: CustomRenderOptions = {}
+) {
+  function WrapperComponent({ children }: { children: ReactElement }) {
+    return Wrapper ? <Wrapper {...providerProps}>{children}</Wrapper> : children;
+  }
+
+  return render(ui, { wrapper: WrapperComponent, ...renderOptions });
+}
+
+/**
+ * Mock IntersectionObserver
+ */
+export const mockIntersectionObserver = () => {
+  global.IntersectionObserver = class IntersectionObserver {
+    observe = vi.fn();
+    unobserve = vi.fn();
+    disconnect = vi.fn();
+  } as any;
+};
+
+/**
+ * Mock ResizeObserver
+ */
+export const mockResizeObserver = () => {
+  global.ResizeObserver = class ResizeObserver {
+    observe = vi.fn();
+    unobserve = vi.fn();
+    disconnect = vi.fn();
+  } as any;
+};
+
+/**
+ * Wait for component to be ready
+ */
+export const waitForReady = async (timeout = 100) => {
+  await waitFor(() => expect(screen.getByRole('document')).toBeInTheDocument(), { timeout });
+};
+
+/**
+ * Create a mock event
+ */
+export const createMockEvent = (type: string, data: any = {}) => {
+  return new Event(type, { bubbles: true, cancelable: true, ...data });
+};
+
+/**
+ * Simulate keyboard events
+ */
+export const simulateKeyboard = async (element: HTMLElement, key: string) => {
+  const user = userEvent.setup();
+  await user.keyboard(key);
+};
+
+/**
+ * Mock CSS custom properties
+ */
+export const mockCSSCustomProperties = () => {
+  Object.defineProperty(document.documentElement.style, '--test-property', {
+    value: 'test-value',
+    writable: true,
+  });
+};
+
+/**
+ * Reset all mocks
+ */
+export const resetMocks = () => {
+  vi.clearAllMocks();
+  vi.resetAllMocks();
+  vi.restoreAllMocks();
+};
+`;
+
+/**
+ * Generates a test setup file
+ */
+export const testSetupTemplate = (): string => `import '@testing-library/jest-dom';
+import { cleanup } from '@testing-library/react';
+import { afterEach, vi } from 'vitest';
+
+// Cleanup after each test
+afterEach(() => {
+  cleanup();
+});
+
+// Mock window.matchMedia
+Object.defineProperty(window, 'matchMedia', {
+  writable: true,
+  value: vi.fn().mockImplementation(query => ({
+    matches: false,
+    media: query,
+    onchange: null,
+    addListener: vi.fn(),
+    removeListener: vi.fn(),
+    addEventListener: vi.fn(),
+    removeEventListener: vi.fn(),
+    dispatchEvent: vi.fn(),
+  })),
+});
+
+// Mock requestAnimationFrame
+global.requestAnimationFrame = (callback) => setTimeout(callback, 0);
+
+// Mock cancelAnimationFrame
+global.cancelAnimationFrame = (id) => clearTimeout(id);
+`;
+
+/**
+ * All testing utilities templates
+ */
+export const testingUtilsTemplates = {
+  utils: testingUtilsTemplate,
+  setup: testSetupTemplate,
+};
+
+/**
+ * Type for testing utilities templates object
+ */
+export type TestingUtilsTemplates = typeof testingUtilsTemplates;

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

@@ -0,0 +1,39 @@
+/**
+ * Vanilla Component Templates
+ * Pure HTML/CSS/JS snippets
+ */
+
+export const vanillaTemplates = {
+  /**
+   * Simple HTML Snippet
+   */
+  simple: (name) => `<div class="${name.toLowerCase()}">
+  <h1>${name} Component</h1>
+</div>
+`,
+
+  /**
+   * Full Vanilla Component (HTML + JS)
+   */
+  component: (name) => `<div class="${name.toLowerCase()}" id="${name.toLowerCase()}-root">
+  <h1>${name} Component</h1>
+</div>
+
+<script>
+  (function() {
+    const root = document.getElementById('${name.toLowerCase()}-root');
+    console.log('${name} initialized');
+  })();
+</script>
+`,
+
+  /**
+   * CSS Snippet
+   */
+  styles: (name) => `.${name.toLowerCase()} {
+  display: block;
+  padding: 1rem;
+  border: 1px solid var(--atomix-border-color, #ccc);
+}
+`
+};

package/scripts/cli/token-manager.js

@@ -280,7 +280,7 @@ export async function listTokens(categories = Object.keys(tokenCategories)) {
     // Show summary
     if (categoryCount === 0) {
       console.log(safeChalkCall(chalk, 'yellow', '\n⚠️  No design tokens found'));
-      console.log(safeChalkCall(chalk, 'gray', 'Make sure you are in an Atomix project directory'));
+      console.log(safeChalkCall(chalk, 'gray', 'Create a theme or add token files in src/styles/01-settings (e.g. _settings.colors.scss). See Atomix token docs.'));
     } else {
       console.log(safeChalkCall(chalk, 'bold.cyan', '\n📐 Design Tokens\n'));
 
@@ -430,6 +430,13 @@ export async function exportTokens(format = 'json', outputPath = null) {
       }
     }
 
+    const categoryCount = Object.keys(allTokens).length;
+    if (categoryCount === 0) {
+      safeSpinnerCall(spinner, 'warn', safeChalkCall(chalk, 'yellow', 'No design tokens found'));
+      console.log(safeChalkCall(chalk, 'gray', 'Create a theme or add token files in src/styles/01-settings. See Atomix token docs.'));
+      return { path: null, tokens: allTokens };
+    }
+
     let output;
     let filename;
 
@@ -501,7 +508,6 @@ export async function exportTokens(format = 'json', outputPath = null) {
     safeSpinnerCall(spinner, 'succeed', safeChalkCall(chalk, 'green', `✓ Exported tokens to ${finalPath}`));
 
     // Show summary
-    const categoryCount = Object.keys(allTokens).length;
     const tokenCount = Object.values(allTokens).reduce(
       (sum, cat) => sum + Object.keys(cat).length,
       0

package/scripts/cli/utils/cache-manager.js

@@ -0,0 +1,240 @@
+/**
+ * Atomix CLI Cache Manager
+ * Utilities for identifying and managing cache files and build artifacts
+ */
+
+import { readdir, stat, rm } from 'fs/promises';
+import { join, extname } from 'path';
+import { filesystem } from '../internal/filesystem.js';
+import { logger } from '../utils/logger.js';
+import chalk from 'chalk';
+
+// File extensions that should NEVER be deleted (source files)
+const PROTECTED_EXTENSIONS = new Set([
+  '.js', '.jsx', '.ts', '.tsx',
+  '.scss', '.css', '.sass',
+  '.json', '.md', '.html',
+  '.yml', '.yaml'
+]);
+
+// Default directories to clean
+const DEFAULT_CLEAN_TARGETS = [
+  'dist',
+  '.atomix',
+  'node_modules/.cache'
+];
+
+// Additional targets for --all flag
+const ALL_CLEAN_TARGETS = [
+  ...DEFAULT_CLEAN_TARGETS,
+  'node_modules'
+];
+
+/**
+ * Cache Manager - Safe file cleanup utilities
+ */
+export const cacheManager = {
+  /**
+   * Identify files and directories that can be safely cleaned
+   * @param {object} options - Clean options
+   * @returns {Promise<string[]>} List of paths to clean
+   */
+  async identifyTargets(options = {}) {
+    const targets = [];
+    const cleanScope = options.all ? ALL_CLEAN_TARGETS : DEFAULT_CLEAN_TARGETS;
+    
+    for (const target of cleanScope) {
+      const fullPath = join(process.cwd(), target);
+      const exists = await filesystem.exists(fullPath);
+      
+      if (exists) {
+        targets.push({
+          path: fullPath,
+          relativePath: target,
+          type: await this.getPathType(fullPath)
+        });
+      }
+    }
+
+    // Add log files if not in cache-only mode
+    if (!options.cache) {
+      const logFiles = await this.findLogFiles();
+      targets.push(...logFiles);
+    }
+
+    return targets;
+  },
+
+  /**
+   * Determine if a path is a file or directory
+   * @param {string} path - Path to check
+   * @returns {Promise<'file'|'directory'>}
+   */
+  async getPathType(path) {
+    try {
+      const stats = await stat(path);
+      return stats.isDirectory() ? 'directory' : 'file';
+    } catch {
+      return 'unknown';
+    }
+  },
+
+  /**
+   * Find all log files in the project
+   * @returns {Promise<Array>} List of log file paths
+   */
+  async findLogFiles() {
+    const logFiles = [];
+    const root = process.cwd();
+    
+    try {
+      const entries = await readdir(root, { withFileTypes: true });
+      
+      for (const entry of entries) {
+        if (entry.isFile() && extname(entry.name) === '.log') {
+          logFiles.push({
+            path: join(root, entry.name),
+            relativePath: entry.name,
+            type: 'file'
+          });
+        }
+      }
+    } catch (error) {
+      logger.debug('Error scanning for log files:', error.message);
+    }
+
+    return logFiles;
+  },
+
+  /**
+   * Check if a file extension is protected (source file)
+   * @param {string} filePath - Path to check
+   * @returns {boolean} True if protected
+   */
+  isProtected(filePath) {
+    const ext = extname(filePath);
+    return PROTECTED_EXTENSIONS.has(ext);
+  },
+
+  /**
+   * Safely delete a file or directory
+   * @param {string} path - Path to delete
+   * @param {object} options - Delete options
+   * @param {boolean} options.skipValidation - Skip path validation (for tests)
+   */
+  async deletePath(path, options = {}) {
+    // Safety check: never delete protected files
+    if (this.isProtected(path)) {
+      throw new Error(`Cannot delete protected source file: ${path}`);
+    }
+
+    // Validate path is within project (unless skipping for tests)
+    if (!options.skipValidation) {
+      const validation = filesystem.validatePath(path);
+      if (!validation.isValid) {
+        throw new Error(`Invalid path: ${validation.error}`);
+      }
+    }
+
+    if (process.env.ATOMIX_DRY_RUN === 'true') {
+      logger.info(`[DRY RUN] Would delete: ${path}`);
+      return true;
+    }
+
+    try {
+      await rm(path, { 
+        recursive: true, 
+        force: true,
+        maxRetries: 3,
+        retryDelay: 100
+      });
+      return true;
+    } catch (error) {
+      throw new Error(`Failed to delete ${path}: ${error.message}`);
+    }
+  },
+
+  /**
+   * Calculate total size of files/directories
+   * @param {Array} targets - List of target paths
+   * @returns {Promise<number>} Total size in bytes
+   */
+  async calculateSize(targets) {
+    let totalSize = 0;
+
+    const calculateDirSize = async (dirPath) => {
+      try {
+        const entries = await readdir(dirPath, { withFileTypes: true });
+        
+        for (const entry of entries) {
+          const fullPath = join(dirPath, entry.name);
+          
+          if (entry.isDirectory()) {
+            totalSize += await calculateDirSize(fullPath);
+          } else {
+            const stats = await stat(fullPath);
+            totalSize += stats.size;
+          }
+        }
+      } catch (error) {
+        logger.debug('Error calculating size:', error.message);
+      }
+      
+      return totalSize;
+    };
+
+    for (const target of targets) {
+      if (target.type === 'directory') {
+        await calculateDirSize(target.path);
+      } else {
+        const stats = await stat(target.path);
+        totalSize += stats.size;
+      }
+    }
+
+    return totalSize;
+  },
+
+  /**
+   * Format bytes to human-readable string
+   * @param {number} bytes - Size in bytes
+   * @returns {string} Formatted size
+   */
+  formatBytes(bytes) {
+    if (bytes === 0) return '0 Bytes';
+    
+    const k = 1024;
+    const sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB'];
+    const i = Math.floor(Math.log(bytes) / Math.log(k));
+    
+    // Handle edge case where size is larger than TB
+    const unit = sizes[i] || 'PB';
+    return Math.round((bytes / Math.pow(k, i)) * 100) / 100 + ' ' + unit;
+  },
+
+  /**
+   * Display dry-run preview of what would be cleaned
+   * @param {Array} targets - Files/dirs to clean
+   */
+  displayDryRun(targets) {
+    if (targets.length === 0) {
+      logger.box('✨ Nothing to clean! Your project is already tidy.', {
+        borderColor: 'green'
+      });
+      return;
+    }
+
+    const fileList = targets
+      .map(t => `  • ${t.relativePath} (${t.type})`)
+      .join('\n');
+    
+    logger.box(
+      `⚠️  Dry Run Mode - The following would be deleted:\n\n${fileList}`,
+      {
+        borderColor: 'yellow'
+      }
+    );
+
+    logger.info(`\nTotal: ${targets.length} item(s)\n`);
+  }
+};

package/scripts/cli/utils/detector.js

@@ -0,0 +1,46 @@
+/**
+ * Atomix CLI Project Detector
+ * Automatically detects the framework environment (React, Next.js, Vanilla)
+ */
+
+import { readFile } from 'fs/promises';
+import { join } from 'path';
+import { existsSync } from 'fs';
+
+/**
+ * Detect the framework from package.json and project structure
+ * @param {string} projectRoot - The root directory of the project
+ * @returns {Promise<'react' | 'next' | 'vanilla'>}
+ */
+export async function detectFramework(projectRoot = process.cwd()) {
+  try {
+    const packageJsonPath = join(projectRoot, 'package.json');
+    
+    if (!existsSync(packageJsonPath)) {
+      return 'vanilla';
+    }
+
+    const packageJson = JSON.parse(await readFile(packageJsonPath, 'utf8'));
+    const allDeps = {
+      ...(packageJson.dependencies || {}),
+      ...(packageJson.devDependencies || {})
+    };
+
+    if (allDeps.next) {
+      return 'next';
+    }
+
+    if (allDeps.react) {
+      return 'react';
+    }
+
+    // Check for framework specific files
+    if (existsSync(join(projectRoot, 'next.config.js')) || existsSync(join(projectRoot, 'next.config.mjs'))) {
+      return 'next';
+    }
+
+    return 'vanilla';
+  } catch (error) {
+    return 'vanilla';
+  }
+}