@shohojdhara/atomix 0.4.8 → 0.4.9

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

@@ -0,0 +1,679 @@
+/**
+ * Motion & Animation Token Generator
+ * Generates comprehensive animation tokens and presets for Atomix components
+ */
+
+import { join } from 'path';
+import { filesystem } from './filesystem.js';
+import { logger } from '../utils/logger.js';
+import { AtomixCLIError } from '../utils/error.js';
+
+/**
+ * Animation preset library
+ */
+export const ANIMATION_PRESETS = {
+  // Fade animations
+  fade: {
+    keyframes: `
+      from { opacity: 0; }
+      to { opacity: 1; }
+    `,
+    duration: 'var(--atomix-duration-base)',
+    easing: 'var(--atomix-easing-smooth)'
+  },
+  
+  fadeIn: {
+    keyframes: `
+      from { opacity: 0; }
+      to { opacity: 1; }
+    `,
+    duration: 'var(--atomix-duration-base)',
+    easing: 'var(--atomix-ease-out)'
+  },
+  
+  fadeOut: {
+    keyframes: `
+      from { opacity: 1; }
+      to { opacity: 0; }
+    `,
+    duration: 'var(--atomix-duration-base)',
+    easing: 'var(--atomix-ease-in)'
+  },
+  
+  // Slide animations
+  slideInUp: {
+    keyframes: `
+      from {
+        transform: translateY(20px);
+        opacity: 0;
+      }
+      to {
+        transform: translateY(0);
+        opacity: 1;
+      }
+    `,
+    duration: 'var(--atomix-duration-slow)',
+    easing: 'var(--atomix-easing-smooth)'
+  },
+  
+  slideInDown: {
+    keyframes: `
+      from {
+        transform: translateY(-20px);
+        opacity: 0;
+      }
+      to {
+        transform: translateY(0);
+        opacity: 1;
+      }
+    `,
+    duration: 'var(--atomix-duration-slow)',
+    easing: 'var(--atomix-easing-smooth)'
+  },
+  
+  slideInLeft: {
+    keyframes: `
+      from {
+        transform: translateX(-20px);
+        opacity: 0;
+      }
+      to {
+        transform: translateX(0);
+        opacity: 1;
+      }
+    `,
+    duration: 'var(--atomix-duration-slow)',
+    easing: 'var(--atomix-easing-smooth)'
+  },
+  
+  slideInRight: {
+    keyframes: `
+      from {
+        transform: translateX(20px);
+        opacity: 0;
+      }
+      to {
+        transform: translateX(0);
+        opacity: 1;
+      }
+    `,
+    duration: 'var(--atomix-duration-slow)',
+    easing: 'var(--atomix-easing-smooth)'
+  },
+  
+  // Scale animations
+  scaleIn: {
+    keyframes: `
+      from {
+        transform: scale(0.95);
+        opacity: 0;
+      }
+      to {
+        transform: scale(1);
+        opacity: 1;
+      }
+    `,
+    duration: 'var(--atomix-duration-fast)',
+    easing: 'var(--atomix-easing-smooth)'
+  },
+  
+  scaleOut: {
+    keyframes: `
+      from {
+        transform: scale(1);
+        opacity: 1;
+      }
+      to {
+        transform: scale(0.95);
+        opacity: 0;
+      }
+    `,
+    duration: 'var(--atomix-duration-fast)',
+    easing: 'var(--atomix-easing-smooth)'
+  },
+  
+  // Bounce animations
+  bounceIn: {
+    keyframes: `
+      0% {
+        transform: scale(0.3);
+        opacity: 0;
+      }
+      50% {
+        transform: scale(1.05);
+      }
+      70% {
+        transform: scale(0.9);
+      }
+      100% {
+        transform: scale(1);
+        opacity: 1;
+      }
+    `,
+    duration: 'var(--atomix-duration-slower)',
+    easing: 'var(--atomix-ease-bounce)'
+  },
+  
+  bounce: {
+    keyframes: `
+      0%, 100% {
+        transform: translateY(0);
+      }
+      50% {
+        transform: translateY(-10px);
+      }
+    `,
+    duration: '0.6s',
+    easing: 'var(--atomix-ease-bounce)',
+    iterations: 'infinite'
+  },
+  
+  // Rotate animations
+  spin: {
+    keyframes: `
+      from {
+        transform: rotate(0deg);
+      }
+      to {
+        transform: rotate(360deg);
+      }
+    `,
+    duration: '1s',
+    easing: 'linear',
+    iterations: 'infinite'
+  },
+  
+  // Shake animation
+  shake: {
+    keyframes: `
+      0%, 100% {
+        transform: translateX(0);
+      }
+      10%, 30%, 50%, 70%, 90% {
+        transform: translateX(-5px);
+      }
+      20%, 40%, 60%, 80% {
+        transform: translateX(5px);
+      }
+    `,
+    duration: '0.5s',
+    easing: 'var(--atomix-easing-smooth)'
+  },
+  
+  // Pulse animation
+  pulse: {
+    keyframes: `
+      0%, 100% {
+        opacity: 1;
+        transform: scale(1);
+      }
+      50% {
+        opacity: 0.8;
+        transform: scale(1.05);
+      }
+    `,
+    duration: '2s',
+    easing: 'var(--atomix-ease-in-out)',
+    iterations: 'infinite'
+  },
+  
+  // Skeleton loading
+  shimmer: {
+    keyframes: `
+      0% {
+        background-position: -200% 0;
+      }
+      100% {
+        background-position: 200% 0;
+      }
+    `,
+    duration: '1.5s',
+    easing: 'linear',
+    iterations: 'infinite'
+  }
+};
+
+/**
+ * Generate motion tokens SCSS
+ */
+export function generateMotionTokens() {
+  return `// Motion & Animation Tokens
+// Generated by Atomix CLI
+// =============================================================================
+
+@use 'sass:map';
+
+// Duration Scale
+// =============================================================================
+
+:root {
+  // Core durations
+  --atomix-duration-instant: 0s;
+  --atomix-duration-immediate: 0.05s;
+  --atomix-duration-fast: 0.15s;
+  --atomix-duration-base: 0.3s;
+  --atomix-duration-slow: 0.5s;
+  --atomix-duration-slower: 0.7s;
+  --atomix-duration-slowest: 1s;
+  
+  // Easing Functions
+  --atomix-easing-linear: linear;
+  --atomix-easing-none: linear;
+  
+  // Standard easings
+  --atomix-ease-in: cubic-bezier(0.4, 0, 1, 1);
+  --atomix-ease-out: cubic-bezier(0, 0, 0.2, 1);
+  --atomix-ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
+  
+  // Premium easings (smooth curves)
+  --atomix-easing-smooth: cubic-bezier(0.23, 1, 0.32, 1);
+  --atomix-easing-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);
+  --atomix-easing-elastic: cubic-bezier(0.175, 0.885, 0.32, 1.275);
+  --atomix-easing-snappy: cubic-bezier(0.2, 0, 0, 1);
+  
+  // Transition presets
+  --atomix-transition-fast: all var(--atomix-duration-fast) var(--atomix-easing-smooth);
+  --atomix-transition-base: all var(--atomix-duration-base) var(--atomix-easing-smooth);
+  --atomix-transition-slow: all var(--atomix-duration-slow) var(--atomix-easing-smooth);
+  
+  // Property-specific transitions
+  --atomix-transition-colors: 
+    background-color var(--atomix-duration-base) var(--atomix-easing-smooth),
+    border-color var(--atomix-duration-base) var(--atomix-easing-smooth),
+    color var(--atomix-duration-base) var(--atomix-easing-smooth),
+    fill var(--atomix-duration-base) var(--atomix-easing-smooth),
+    stroke var(--atomix-duration-base) var(--atomix-easing-smooth);
+  
+  --atomix-transition-opacity: 
+    opacity var(--atomix-duration-base) var(--atomix-easing-smooth);
+  
+  --atomix-transition-shadow: 
+    box-shadow var(--atomix-duration-base) var(--atomix-easing-smooth);
+  
+  --atomix-transition-transform: 
+    transform var(--atomix-duration-base) var(--atomix-easing-smooth);
+}
+
+// Keyframe Definitions
+// =============================================================================
+
+// Fade
+@keyframes atomix-fade-in {
+  from { opacity: 0; }
+  to { opacity: 1; }
+}
+
+@keyframes atomix-fade-out {
+  from { opacity: 1; }
+  to { opacity: 0; }
+}
+
+// Slide
+@keyframes atomix-slide-in-up {
+  from {
+    transform: translateY(20px);
+    opacity: 0;
+  }
+  to {
+    transform: translateY(0);
+    opacity: 1;
+  }
+}
+
+@keyframes atomix-slide-in-down {
+  from {
+    transform: translateY(-20px);
+    opacity: 0;
+  }
+  to {
+    transform: translateY(0);
+    opacity: 1;
+  }
+}
+
+@keyframes atomix-slide-in-left {
+  from {
+    transform: translateX(-20px);
+    opacity: 0;
+  }
+  to {
+    transform: translateX(0);
+    opacity: 1;
+  }
+}
+
+@keyframes atomix-slide-in-right {
+  from {
+    transform: translateX(20px);
+    opacity: 0;
+  }
+  to {
+    transform: translateX(0);
+    opacity: 1;
+  }
+}
+
+// Scale
+@keyframes atomix-scale-in {
+  from {
+    transform: scale(0.95);
+    opacity: 0;
+  }
+  to {
+    transform: scale(1);
+    opacity: 1;
+  }
+}
+
+@keyframes atomix-scale-out {
+  from {
+    transform: scale(1);
+    opacity: 1;
+  }
+  to {
+    transform: scale(0.95);
+    opacity: 0;
+  }
+}
+
+// Bounce
+@keyframes atomix-bounce-in {
+  0% {
+    transform: scale(0.3);
+    opacity: 0;
+  }
+  50% {
+    transform: scale(1.05);
+  }
+  70% {
+    transform: scale(0.9);
+  }
+  100% {
+    transform: scale(1);
+    opacity: 1;
+  }
+}
+
+@keyframes atomix-bounce {
+  0%, 100% {
+    transform: translateY(0);
+  }
+  50% {
+    transform: translateY(-10px);
+  }
+}
+
+// Rotate
+@keyframes atomix-spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+// Shake
+@keyframes atomix-shake {
+  0%, 100% {
+    transform: translateX(0);
+  }
+  10%, 30%, 50%, 70%, 90% {
+    transform: translateX(-5px);
+  }
+  20%, 40%, 60%, 80% {
+    transform: translateX(5px);
+  }
+}
+
+// Pulse
+@keyframes atomix-pulse {
+  0%, 100% {
+    opacity: 1;
+    transform: scale(1);
+  }
+  50% {
+    opacity: 0.8;
+    transform: scale(1.05);
+  }
+}
+
+// Shimmer (skeleton loading)
+@keyframes atomix-shimmer {
+  0% {
+    background-position: -200% 0;
+  }
+  100% {
+    background-position: 200% 0;
+  }
+}
+
+// Animation Utility Classes
+// =============================================================================
+
+// Fade animations
+.atomix-animate-fade-in {
+  animation: atomix-fade-in var(--atomix-duration-base) var(--atomix-easing-smooth);
+}
+
+.atomix-animate-fade-out {
+  animation: atomix-fade-out var(--atomix-duration-base) var(--atomix-easing-smooth);
+}
+
+// Slide animations
+.atomix-animate-slide-in-up {
+  animation: atomix-slide-in-up var(--atomix-duration-slow) var(--atomix-easing-smooth);
+}
+
+.atomix-animate-slide-in-down {
+  animation: atomix-slide-in-down var(--atomix-duration-slow) var(--atomix-easing-smooth);
+}
+
+.atomix-animate-slide-in-left {
+  animation: atomix-slide-in-left var(--atomix-duration-slow) var(--atomix-easing-smooth);
+}
+
+.atomix-animate-slide-in-right {
+  animation: atomix-slide-in-right var(--atomix-duration-slow) var(--atomix-easing-smooth);
+}
+
+// Scale animations
+.atomix-animate-scale-in {
+  animation: atomix-scale-in var(--atomix-duration-fast) var(--atomix-easing-smooth);
+}
+
+.atomix-animate-scale-out {
+  animation: atomix-scale-out var(--atomix-duration-fast) var(--atomix-easing-smooth);
+}
+
+// Bounce animations
+.atomix-animate-bounce-in {
+  animation: atomix-bounce-in var(--atomix-duration-slower) var(--atomix-ease-bounce);
+}
+
+.atomix-animate-bounce {
+  animation: atomix-bounce 0.6s var(--atomix-ease-bounce) infinite;
+}
+
+// Rotate animations
+.atomix-animate-spin {
+  animation: atomix-spin 1s linear infinite;
+}
+
+// Shake animation
+.atomix-animate-shake {
+  animation: atomix-shake 0.5s var(--atomix-easing-smooth);
+}
+
+// Pulse animation
+.atomix-animate-pulse {
+  animation: atomix-pulse 2s var(--atomix-ease-in-out) infinite;
+}
+
+// Shimmer animation (skeleton)
+.atomix-animate-shimmer {
+  animation: atomix-shimmer 1.5s linear infinite;
+  background: linear-gradient(
+    90deg,
+    rgba(255, 255, 255, 0) 0%,
+    rgba(255, 255, 255, 0.2) 20%,
+    rgba(255, 255, 255, 0.5) 60%,
+    rgba(255, 255, 255, 0)
+  );
+  background-size: 200% auto;
+}
+
+// Animation Delays
+.atomix-delay-100 { animation-delay: 0.1s; }
+.atomix-delay-200 { animation-delay: 0.2s; }
+.atomix-delay-300 { animation-delay: 0.3s; }
+.atomix-delay-400 { animation-delay: 0.4s; }
+.atomix-delay-500 { animation-delay: 0.5s; }
+
+// Animation Durations
+.atomix-duration-fast { animation-duration: var(--atomix-duration-fast); }
+.atomix-duration-base { animation-duration: var(--atomix-duration-base); }
+.atomix-duration-slow { animation-duration: var(--atomix-duration-slow); }
+
+// Reduced Motion
+// =============================================================================
+
+@media (prefers-reduced-motion: reduce) {
+  *,
+  *::before,
+  *::after {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+  }
+  
+  // Disable parallax and scroll-based animations
+  .atomix-parallax,
+  .atomix-scroll-animate {
+    transform: none !important;
+    opacity: 1 !important;
+  }
+}
+`;
+}
+
+/**
+ * Generate component-specific animation config
+ */
+export function generateComponentAnimation(componentName) {
+  const componentPrefix = componentName.toLowerCase().replace(/([A-Z])/g, '-$1').replace(/^-/, '');
+  
+  return `// ${componentName} Animation Configuration
+// Generated by Atomix CLI
+// =============================================================================
+
+@use '../../01-settings/settings.${componentPrefix}' as *;
+@use '../../02-tools/motion-tokens' as *;
+
+// Component Animation Variables
+:root {
+  --${componentPrefix}-enter-duration: var(--atomix-duration-base);
+  --${componentPrefix}-exit-duration: var(--atomix-duration-fast);
+  --${componentPrefix}-hover-duration: var(--atomix-duration-fast);
+  --${componentPrefix}-focus-duration: var(--atomix-duration-immediate);
+  
+  --${componentPrefix}-enter-easing: var(--atomix-easing-smooth);
+  --${componentPrefix}-exit-easing: var(--atomix-ease-in);
+  --${componentPrefix}-hover-easing: var(--atomix-easing-smooth);
+}
+
+// Component Enter/Exit Animations
+.${componentPrefix}--animate-enter {
+  animation: atomix-fade-in var(--${componentPrefix}-enter-duration) var(--${componentPrefix}-enter-easing);
+}
+
+.${componentPrefix}--animate-exit {
+  animation: atomix-fade-out var(--${componentPrefix}-exit-duration) var(--${componentPrefix}-exit-easing);
+}
+
+// Hover Animation
+.${componentPrefix}:hover {
+  transition: transform var(--${componentPrefix}-hover-duration) var(--${componentPrefix}-hover-easing),
+              box-shadow var(--${component-prefix}-hover-duration) var(--${componentPrefix}-hover-easing);
+  
+  // Subtle lift effect
+  transform: translateY(-2px);
+  box-shadow: var(--atomix-shadow-md);
+}
+
+// Focus Animation
+.${componentPrefix}:focus-visible {
+  transition: box-shadow var(--${componentPrefix}-focus-duration) var(--${componentPrefix}-focus-easing);
+  box-shadow: 0 0 0 2px var(--atomix-color-primary-200);
+}
+
+// Loading State Animation
+.${componentPrefix}--state-loading {
+  animation: atomix-pulse 2s var(--atomix-ease-in-out) infinite;
+}
+
+// Disabled State
+.${componentPrefix}--state-disabled {
+  transition: opacity var(--atomix-duration-base) var(--atomix-ease-out);
+  opacity: var(--${componentPrefix}-disabled-opacity);
+}
+`;
+}
+
+/**
+ * Generate complete motion package
+ */
+export async function generateMotionPackage(projectRoot, options = {}) {
+  const {
+    outputDir = 'src/styles/02-tools',
+    force = false
+  } = options;
+  
+  const created = [];
+  
+  try {
+    // Create output directory
+    await filesystem.createDirectory(outputDir);
+    
+    // Generate motion tokens file
+    const motionFile = join(outputDir, '_motion-tokens.scss');
+    
+    if (force || !await filesystem.exists(motionFile)) {
+      const motionContent = generateMotionTokens();
+      await filesystem.writeFile(motionFile, motionContent, 'utf8');
+      created.push('src/styles/02-tools/_motion-tokens.scss');
+      logger.debug(`Created motion tokens: ${motionFile}`);
+    }
+    
+    return {
+      success: true,
+      created,
+      message: `Generated motion package with ${created.length} files`
+    };
+    
+  } catch (error) {
+    throw new AtomixCLIError(
+      `Failed to generate motion package: ${error.message}`,
+      'MOTION_GENERATION_FAILED',
+      [
+        'Check you have write permissions for src/styles directory',
+        'Verify motion tokens don\'t already exist',
+        'Try running with --force flag to overwrite existing files'
+      ]
+    );
+  }
+}
+
+/**
+ * Get available animation presets
+ */
+export function getAnimationPresets() {
+  return Object.keys(ANIMATION_PRESETS);
+}
+
+/**
+ * Get animation preset details
+ */
+export function getAnimationPreset(name) {
+  return ANIMATION_PRESETS[name] || null;
+}