@shohojdhara/atomix 0.4.8 → 0.5.0

package/scripts/cli/internal/itcss-generator.js

@@ -0,0 +1,565 @@
+/**
+ * ITCSS Style Generator
+ * Automates creation of ITCSS architecture layers for components
+ */
+
+import { join } from 'path';
+import { existsSync } from 'fs';
+import { filesystem } from './filesystem.js';
+import { logger } from '../utils/logger.js';
+import { AtomixCLIError } from '../utils/error.js';
+import { generateGlassStyles } from './glass-generator.js';
+import { generateMotionTokens, ANIMATION_PRESETS } from './motion-generator.js';
+
+/**
+ * ITCSS Layer definitions
+ */
+export const ITCSS_LAYERS = {
+  SETTINGS: {
+    name: 'settings',
+    order: '01',
+    path: 'src/styles/01-settings',
+    description: 'Global variables, config switches, and brand colors'
+  },
+  TOOLS: {
+    name: 'tools',
+    order: '02',
+    path: 'src/styles/02-tools',
+    description: 'Globally used mixins and functions'
+  },
+  GENERIC: {
+    name: 'generic',
+    order: '03',
+    path: 'src/styles/03-generic',
+    description: 'Ground-zero styles (normalize, resets, box-sizing)'
+  },
+  ELEMENTS: {
+    name: 'elements',
+    order: '04',
+    path: 'src/styles/04-elements',
+    description: 'Unclassed HTML elements (type selectors)'
+  },
+  OBJECTS: {
+    name: 'objects',
+    order: '05',
+    path: 'src/styles/05-objects',
+    description: 'Cosmetic-free design patterns (layouts, grids)'
+  },
+  COMPONENTS: {
+    name: 'components',
+    order: '06',
+    path: 'src/styles/06-components',
+    description: 'Designed components, chunks of UI'
+  },
+  UTILITIES: {
+    name: 'utilities',
+    order: '99',
+    path: 'src/styles/99-utilities',
+    description: 'Helper classes with ability to override anything'
+  }
+};
+
+/**
+ * Generate SCSS settings file for a component
+ */
+export function generateSettingsFile(componentName, options = {}) {
+  const { 
+    primaryColor = '--atomix-color-primary',
+    spacingBase = '--atomix-spacing-4',
+    radiusBase = '--atomix-radius-md'
+  } = options;
+  
+  const componentPrefix = componentName.toLowerCase().replace(/([A-Z])/g, '-$1').replace(/^-/, '');
+  
+  return `// ${componentName} Component Settings
+// Generated by Atomix CLI
+// =============================================================================
+
+@use 'sass:color';
+@use '../../lib/functions' as *;
+@use '../../lib/mixins' as *;
+
+// Component-specific CSS Custom Properties
+// These override or extend global design tokens
+
+:root {
+  // Brand Colors
+  --${componentPrefix}-primary: var(${primaryColor});
+  --${componentPrefix}-primary-hover: color.adjust(var(${primaryColor}), $lightness: -10%);
+  --${componentPrefix}-primary-active: color.adjust(var(${primaryColor}), $lightness: -20%);
+  
+  // Spacing
+  --${componentPrefix}-padding-x: var(${spacingBase});
+  --${componentPrefix}-padding-y: calc(var(${spacingBase}) * 0.5);
+  --${componentPrefix}-gap: var(${spacingBase});
+  
+  // Border Radius
+  --${componentPrefix}-radius: var(${radiusBase});
+  
+  // Typography
+  --${componentPrefix}-font-size: var(--atomix-font-size-base);
+  --${componentPrefix}-font-weight: var(--atomix-font-weight-medium);
+  --${componentPrefix}-line-height: var(--atomix-line-height-tight);
+  
+  // States
+  --${componentPrefix}-disabled-opacity: 0.5;
+  --${componentPrefix}-focus-ring: 0 0 0 2px var(--atomix-color-primary-200);
+}
+
+// Dark mode overrides
+.dark {
+  :root {
+    --${componentPrefix}-focus-ring: 0 0 0 2px var(--atomix-color-primary-800);
+  }
+}
+
+// Component configuration map
+$${componentPrefix}-config: (
+  'primary': var(--${componentPrefix}-primary),
+  'padding-x': var(--${componentPrefix}-padding-x),
+  'padding-y': var(--${componentPrefix}-padding-y),
+  'gap': var(--${componentPrefix}-gap),
+  'radius': var(--${componentPrefix}-radius),
+  'font-size': var(--${componentPrefix}-font-size),
+  'font-weight': var(--${componentPrefix}-font-weight),
+  'line-height': var(--${componentPrefix}-line-height),
+) !default;
+`;
+}
+
+/**
+ * Generate SCSS component styles file
+ */
+export function generateComponentStyles(componentName, options = {}) {
+  const { 
+    baseClass = `c-${componentName.toLowerCase().replace(/([A-Z])/g, '-$1').replace(/^-/, '')}`,
+    hasVariants = true,
+    hasSizes = true,
+    hasStates = true,
+    hasAnimations = true
+  } = options;
+  
+  const componentPrefix = componentName.toLowerCase().replace(/([A-Z])/g, '-$1').replace(/^-/, '');
+  
+  return `// ${componentName} Component Styles
+// Generated by Atomix CLI
+// ITCSS Layer: Components
+// =============================================================================
+
+@use 'sass:map';
+@use '../../01-settings/settings.${componentPrefix}' as *;
+@use '../../02-tools/mixins' as *;
+@use '../../02-tools/functions' as *;
+
+// Base Component Class
+// =============================================================================
+
+.${baseClass} {
+  // Layout
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--${componentPrefix}-gap);
+  
+  // Spacing
+  padding: var(--${componentPrefix}-padding-y) var(--${componentPrefix}-padding-x);
+  
+  // Typography
+  font-size: var(--${componentPrefix}-font-size);
+  font-weight: var(--${componentPrefix}-font-weight);
+  line-height: var(--${componentPrefix}-line-height);
+  
+  // Appearance
+  border-radius: var(--${componentPrefix}-radius);
+  border: none;
+  cursor: pointer;
+  
+  // Transition
+  transition: all var(--atomix-duration-fast) var(--atomix-easing-smooth);
+  
+  // Focus
+  &:focus-visible {
+    outline: none;
+    box-shadow: var(--${componentPrefix}-focus-ring);
+  }
+  
+  // Disabled state
+  &:disabled {
+    opacity: var(--${componentPrefix}-disabled-opacity);
+    cursor: not-allowed;
+    pointer-events: none;
+  }
+}
+
+// Variants
+// =============================================================================
+
+@if ${hasVariants} {
+  .${baseClass}--variant-primary {
+    background-color: var(--${componentPrefix}-primary);
+    color: var(--atomix-color-white);
+    
+    &:hover:not(:disabled) {
+      background-color: var(--${componentPrefix}-primary-hover);
+    }
+    
+    &:active:not(:disabled) {
+      background-color: var(--${componentPrefix}-primary-active);
+    }
+  }
+  
+  .${baseClass}--variant-secondary {
+    background-color: var(--atomix-color-neutral-100);
+    color: var(--atomix-color-neutral-900);
+    
+    &:hover:not(:disabled) {
+      background-color: var(--atomix-color-neutral-200);
+    }
+  }
+  
+  .${baseClass}--variant-outline {
+    background-color: transparent;
+    border: 1px solid var(--atomix-color-neutral-300);
+    color: var(--atomix-color-neutral-700);
+    
+    &:hover:not(:disabled) {
+      border-color: var(--atomix-color-neutral-400);
+      background-color: var(--atomix-color-neutral-50);
+    }
+  }
+}
+
+// Glassmorphism Variant
+// =============================================================================
+
+.${baseClass}--glass {
+  background: rgba(255, 255, 255, 0.1);
+  backdrop-filter: blur(10px) saturate(200%);
+  border: 1px solid rgba(255, 255, 255, 0.2);
+  
+  @media (prefers-reduced-transparency: reduce) {
+    background: rgba(255, 255, 255, 0.8);
+    backdrop-filter: none;
+  }
+  
+  &:hover:not(:disabled) {
+    background: rgba(255, 255, 255, 0.15);
+  }
+}
+
+// Animation Variants
+// =============================================================================
+
+@if ${hasAnimations} {
+  // Fade In Animation
+  .${baseClass}--animate-fade-in {
+    animation: atomix-fade-in var(--atomix-duration-base) var(--atomix-easing-smooth);
+  }
+  
+  // Slide In Up Animation
+  .${baseClass}--animate-slide-in-up {
+    animation: atomix-slide-in-up var(--atomix-duration-slow) var(--atomix-easing-smooth);
+  }
+  
+  // Scale In Animation
+  .${baseClass}--animate-scale-in {
+    animation: atomix-scale-in var(--atomix-duration-base) var(--atomix-easing-smooth);
+  }
+  
+  // Pulse Animation (for loading states)
+  .${baseClass}--animate-pulse {
+    animation: atomix-pulse 2s var(--atomix-easing-smooth) infinite;
+  }
+  
+  // Shimmer Animation (for skeleton loaders)
+  .${baseClass}--animate-shimmer {
+    animation: atomix-shimmer 2s linear infinite;
+    background: linear-gradient(
+      90deg,
+      var(--atomix-color-neutral-100) 0%,
+      var(--atomix-color-neutral-200) 50%,
+      var(--atomix-color-neutral-100) 100%
+    );
+    background-size: 200% 100%;
+  }
+}
+
+// Motion Preferences
+// =============================================================================
+
+@media (prefers-reduced-motion: reduce) {
+  .${baseClass},
+  .${baseClass} * {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+  }
+}
+
+// Sizes
+// =============================================================================
+
+@if ${hasSizes} {
+  .${baseClass}--size-sm {
+    padding: calc(var(--${componentPrefix}-padding-y) * 0.75) calc(var(--${componentPrefix}-padding-x) * 0.75);
+    font-size: var(--atomix-font-size-sm);
+  }
+  
+  .${baseClass}--size-md {
+    // Default size - no overrides needed
+  }
+  
+  .${baseClass}--size-lg {
+    padding: calc(var(--${componentPrefix}-padding-y) * 1.25) calc(var(--${componentPrefix}-padding-x) * 1.25);
+    font-size: var(--atomix-font-size-lg);
+  }
+}
+
+// States
+// =============================================================================
+
+@if ${hasStates} {
+  .${baseClass}--state-loading {
+    position: relative;
+    pointer-events: none;
+    
+    &::after {
+      content: '';
+      position: absolute;
+      inset: 0;
+      background: rgba(255, 255, 255, 0.3);
+      backdrop-filter: blur(2px);
+    }
+  }
+  
+  .${baseClass}--state-glass {
+    background-color: rgba(255, 255, 255, 0.1);
+    backdrop-filter: blur(10px);
+    border: 1px solid rgba(255, 255, 255, 0.2);
+  }
+}
+
+// Responsive Overrides
+// =============================================================================
+
+@include atomix-media-breakpoint-up(md) {
+  .${baseClass} {
+    // Tablet-specific adjustments if needed
+  }
+}
+
+@include atomix-media-breakpoint-up(lg) {
+  .${baseClass} {
+    // Desktop-specific adjustments if needed
+  }
+}
+`;
+}
+
+/**
+ * Generate index file for ITCSS layer
+ */
+export function generateLayerIndex(layerKey) {
+  const layer = ITCSS_LAYERS[layerKey];
+  
+  if (!layer) {
+    throw new Error(`Unknown ITCSS layer: ${layerKey}`);
+  }
+  
+  const imports = [];
+  
+  switch (layerKey) {
+    case 'SETTINGS':
+      imports.push(
+        "// Settings Layer",
+        "// Global variables, config switches, and brand colors",
+        "",
+        "@forward 'settings.colors';",
+        "@forward 'settings.typography';",
+        "@forward 'settings.spacing';",
+        "@forward 'settings.border-radius';",
+        "@forward 'settings.box-shadow';",
+        "@forward 'settings.breakpoints';"
+      );
+      break;
+    case 'TOOLS':
+      imports.push(
+        "// Tools Layer", 
+        "// Globally used mixins and functions",
+        "",
+        "@forward 'functions';",
+        "@forward 'mixins';",
+        "@forward 'helpers';"
+      );
+      break;
+    case 'GENERIC':
+      imports.push(
+        "// Generic Layer",
+        "// Ground-zero styles (normalize.css, resets, box-sizing)",
+        "",
+        "@forward 'normalize';",
+        "@forward 'reset';",
+        "@forward 'box-sizing';"
+      );
+      break;
+    case 'ELEMENTS':
+      imports.push(
+        "// Elements Layer",
+        "// Unclassed HTML elements (type selectors)",
+        "",
+        "@forward 'elements.headings';",
+        "@forward 'elements.text';",
+        "@forward 'elements.links';",
+        "@forward 'elements.forms';"
+      );
+      break;
+    case 'OBJECTS':
+      imports.push(
+        "// Objects Layer",
+        "// Cosmetic-free design patterns (layouts, grids)",
+        "",
+        "@forward 'objects.grid';",
+        "@forward 'objects.flex';",
+        "@forward 'objects.container';",
+        "@forward 'objects.stack';"
+      );
+      break;
+    case 'COMPONENTS':
+      imports.push(
+        "// Components Layer",
+        "// Designed components, chunks of UI",
+        "",
+        "// Component imports are auto-generated",
+        "// Example:",
+        "// @forward 'components.button';",
+        "// @forward 'components.card';",
+        "// @forward 'components.input';"
+      );
+      break;
+    case 'UTILITIES':
+      imports.push(
+        "// Utilities Layer",
+        "// Helper classes with ability to override anything",
+        "",
+        "@forward 'utilities.display';",
+        "@forward 'utilities.spacing';",
+        "@forward 'utilities.flexibility';",
+        "@forward 'utilities.accessibility';"
+      );
+      break;
+  }
+  
+  return imports.join('\n');
+}
+
+/**
+ * Create ITCSS directory structure
+ */
+export async function createITCSSStructure(projectRoot) {
+  const created = [];
+  
+  for (const [key, layer] of Object.entries(ITCSS_LAYERS)) {
+    const layerPath = join(projectRoot, layer.path);
+    
+    // Create directory
+    await filesystem.createDirectory(layerPath);
+    created.push(layer.path);
+    
+    // Create index file if it doesn't exist
+    const indexPath = join(layerPath, '_index.scss');
+    if (!existsSync(indexPath)) {
+      await filesystem.writeFile(indexPath, generateLayerIndex(key), 'utf8');
+      created.push(`${layer.path}/_index.scss`);
+    }
+  }
+  
+  return created;
+}
+
+/**
+ * Generate complete component styles package
+ */
+export async function generateComponentStylesPackage(componentName, projectRoot, options = {}) {
+  const {
+    skipSettings = false,
+    skipComponents = false,
+    force = false
+  } = options;
+  
+  const created = [];
+  const componentPrefix = componentName.toLowerCase().replace(/([A-Z])/g, '-$1').replace(/^-/, '');
+  
+  try {
+    // 1. Generate Settings File
+    if (!skipSettings) {
+      const settingsPath = join(projectRoot, 'src/styles/01-settings');
+      await filesystem.createDirectory(settingsPath);
+      
+      const settingsFile = join(settingsPath, `_settings.${componentPrefix}.scss`);
+      
+      if (force || !existsSync(settingsFile)) {
+        const settingsContent = generateSettingsFile(componentName);
+        await filesystem.writeFile(settingsFile, settingsContent, 'utf8');
+        created.push(`src/styles/01-settings/_settings.${componentPrefix}.scss`);
+        logger.debug(`Created settings file: ${settingsFile}`);
+      }
+    }
+    
+    // 2. Generate Component Styles File
+    if (!skipComponents) {
+      const componentsPath = join(projectRoot, 'src/styles/06-components');
+      await filesystem.createDirectory(componentsPath);
+      
+      const componentFile = join(componentsPath, `_components.${componentPrefix}.scss`);
+      
+      if (force || !existsSync(componentFile)) {
+        const componentContent = generateComponentStyles(componentName);
+        await filesystem.writeFile(componentFile, componentContent, 'utf8');
+        created.push(`src/styles/06-components/_components.${componentPrefix}.scss`);
+        logger.debug(`Created component styles: ${componentFile}`);
+      }
+    }
+    
+    return {
+      success: true,
+      created,
+      message: `Generated ${created.length} ITCSS files for ${componentName}`
+    };
+    
+  } catch (error) {
+    throw new AtomixCLIError(
+      `Failed to generate ITCSS styles: ${error.message}`,
+      'ITCSS_GENERATION_FAILED',
+      [
+        'Check you have write permissions for src/styles directory',
+        'Verify project root is correct',
+        'Try running with --force flag to overwrite existing files'
+      ]
+    );
+  }
+}
+
+/**
+ * Check if ITCSS structure exists
+ */
+export function checkITCSSStructure(projectRoot) {
+  const status = {
+    complete: true,
+    missing: [],
+    existing: []
+  };
+  
+  for (const [key, layer] of Object.entries(ITCSS_LAYERS)) {
+    const layerPath = join(projectRoot, layer.path);
+    const indexPath = join(layerPath, '_index.scss');
+    
+    if (existsSync(indexPath)) {
+      status.existing.push(layer.name);
+    } else {
+      status.missing.push(layer.name);
+      status.complete = false;
+    }
+  }
+  
+  return status;
+}