@shohojdhara/atomix 0.4.7 → 0.4.9

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

@@ -0,0 +1,398 @@
+/**
+ * Glassmorphism Component Generator
+ * Generates premium glass effect components following Atomix design patterns
+ */
+
+import { join } from 'path';
+import { filesystem } from './filesystem.js';
+import { logger } from '../utils/logger.js';
+import { AtomixCLIError } from '../utils/error.js';
+
+/**
+ * Glass effect configuration presets
+ */
+export const GLASS_PRESETS = {
+  subtle: {
+    name: 'Subtle',
+    displacementScale: 10,
+    blurAmount: 5,
+    saturation: 150,
+    elasticity: 0.3,
+    opacity: 0.1,
+    borderOpacity: 0.2
+  },
+  default: {
+    name: 'Default',
+    displacementScale: 20,
+    blurAmount: 10,
+    saturation: 200,
+    elasticity: 0.5,
+    opacity: 0.15,
+    borderOpacity: 0.3
+  },
+  strong: {
+    name: 'Strong',
+    displacementScale: 30,
+    blurAmount: 20,
+    saturation: 250,
+    elasticity: 0.7,
+    opacity: 0.2,
+    borderOpacity: 0.4
+  },
+  frost: {
+    name: 'Frost',
+    displacementScale: 40,
+    blurAmount: 30,
+    saturation: 300,
+    elasticity: 0.8,
+    opacity: 0.25,
+    borderOpacity: 0.5
+  },
+  crystal: {
+    name: 'Crystal',
+    displacementScale: 50,
+    blurAmount: 40,
+    saturation: 350,
+    elasticity: 1,
+    opacity: 0.3,
+    borderOpacity: 0.6
+  }
+};
+
+/**
+ * Generate glassmorphism CSS styles
+ */
+export function generateGlassStyles(componentName, preset = 'default') {
+  const config = typeof preset === 'string' ? GLASS_PRESETS[preset] : preset;
+  const componentPrefix = componentName.toLowerCase().replace(/([A-Z])/g, '-$1').replace(/^-/, '');
+  
+  return `// ${componentName} Glassmorphism Styles
+// Generated by Atomix CLI
+// Preset: ${config.name}
+// =============================================================================
+
+@use '../../01-settings/settings.${componentPrefix}' as *;
+@use '../../02-tools/mixins' as *;
+
+// Glass Effect Base
+// =============================================================================
+
+.${componentPrefix}--glass {
+  // Glass background
+  background: rgba(255, 255, 255, ${config.opacity});
+  backdrop-filter: blur(${config.blurAmount}px) saturate(${config.saturation}%);
+  -webkit-backdrop-filter: blur(${config.blurAmount}px) saturate(${config.saturation}%);
+  
+  // Glass border
+  border: 1px solid rgba(255, 255, 255, ${config.borderOpacity});
+  box-shadow: 
+    0 4px 6px -1px rgba(0, 0, 0, 0.1),
+    0 2px 4px -1px rgba(0, 0, 0, 0.06),
+    inset 0 1px 0 0 rgba(255, 255, 255, ${config.borderOpacity});
+  
+  // Distortion effect (simulated with CSS)
+  transform: scale(1);
+  transition: all var(--atomix-duration-base) var(--atomix-easing-smooth);
+  
+  // Hover state - enhanced glass effect
+  &:hover:not(:disabled) {
+    background: rgba(255, 255, 255, calc(${config.opacity} * 1.2));
+    backdrop-filter: blur(calc(${config.blurAmount}px + 5px)) saturate(calc(${config.saturation}% + 50));
+    border-color: rgba(255, 255, 255, calc(${config.borderOpacity} * 1.2));
+    box-shadow: 
+      0 10px 15px -3px rgba(0, 0, 0, 0.1),
+      0 4px 6px -2px rgba(0, 0, 0, 0.05),
+      inset 0 1px 0 0 rgba(255, 255, 255, calc(${config.borderOpacity} * 1.3)),
+      0 0 20px rgba(255, 255, 255, 0.1);
+  }
+  
+  // Active/pressed state
+  &:active:not(:disabled) {
+    transform: scale(0.98);
+    background: rgba(255, 255, 255, calc(${config.opacity} * 0.9));
+  }
+  
+  // Focus state
+  &:focus-visible {
+    outline: none;
+    box-shadow: 
+      0 0 0 2px rgba(var(--atomix-color-primary-rgb), 0.2),
+      0 0 0 4px rgba(var(--atomix-color-primary-rgb), 0.1),
+      0 10px 15px -3px rgba(0, 0, 0, 0.1);
+  }
+}
+
+// Dark Mode Glass
+// =============================================================================
+
+.dark .${componentPrefix}--glass {
+  background: rgba(30, 30, 30, ${config.opacity});
+  border-color: rgba(255, 255, 255, calc(${config.borderOpacity} * 0.5));
+  
+  &:hover:not(:disabled) {
+    background: rgba(40, 40, 40, calc(${config.opacity} * 1.2));
+    border-color: rgba(255, 255, 255, calc(${config.borderOpacity} * 0.6));
+  }
+}
+
+// Glass Variants
+// =============================================================================
+
+.${componentPrefix}--glass-light {
+  background: rgba(255, 255, 255, calc(${config.opacity} * 0.7));
+  backdrop-filter: blur(calc(${config.blurAmount}px - 2px)) saturate(calc(${config.saturation}% - 50));
+}
+
+.${componentPrefix}--glass-dark {
+  background: rgba(0, 0, 0, ${config.opacity});
+  backdrop-filter: blur(${config.blurAmount}px) saturate(${config.saturation}%);
+  border-color: rgba(0, 0, 0, ${config.borderOpacity});
+}
+
+.${componentPrefix}--glass-colored {
+  background: rgba(var(--atomix-color-primary-rgb), ${config.opacity});
+  backdrop-filter: blur(${config.blurAmount}px) saturate(calc(${config.saturation}% + 100));
+  border-color: rgba(var(--atomix-color-primary-rgb), ${config.borderOpacity});
+}
+
+// Responsive Glass Adjustments
+// =============================================================================
+
+@include atomix-media-breakpoint-up(md) {
+  .${componentPrefix}--glass {
+    // Enhanced blur on desktop for better performance
+    backdrop-filter: blur(calc(${config.blurAmount}px + 5px)) saturate(${config.saturation}%);
+  }
+}
+
+// Performance Optimization
+// Reduce backdrop-filter on mobile devices
+@media (max-width: 767px) {
+  .${componentPrefix}--glass {
+    // Fallback for mobile devices
+    background: rgba(255, 255, 255, calc(${config.opacity} * 1.5));
+    backdrop-filter: blur(calc(${config.blurAmount}px / 2));
+  }
+  
+  // Only apply full glass effect if prefers-reduced-motion is not set
+  @media (prefers-reduced-motion: no-preference) {
+    .${componentPrefix}--glass {
+      backdrop-filter: blur(${config.blurAmount}px) saturate(${config.saturation}%);
+    }
+  }
+}
+
+// Accessibility: Reduced Transparency
+// =============================================================================
+
+@media (prefers-reduced-transparency: reduce) {
+  .${componentPrefix}--glass {
+    background: rgba(255, 255, 255, 0.95);
+    backdrop-filter: none;
+    -webkit-backdrop-filter: none;
+    border: 1px solid var(--atomix-color-neutral-300);
+  }
+  
+  .dark .${componentPrefix}--glass {
+    background: rgba(30, 30, 30, 0.95);
+  }
+}
+`;
+}
+
+/**
+ * Generate glass-enhanced React component wrapper
+ */
+export function generateGlassWrapper(componentName) {
+  return `/**
+ * Glass Effect Configuration Type
+ */
+export interface GlassConfig {
+  /**
+   * Displacement scale for distortion effect (0-100)
+   * @default 20
+   */
+  displacementScale?: number;
+  
+  /**
+   * Blur amount in pixels (0-50)
+   * @default 10
+   */
+  blurAmount?: number;
+  
+  /**
+   * Saturation percentage (100-500)
+   * @default 200
+   */
+  saturation?: number;
+  
+  /**
+   * Elasticity factor for hover animation (0-1)
+   * @default 0.5
+   */
+  elasticity?: number;
+  
+  /**
+   * Background opacity (0-1)
+   * @default 0.15
+   */
+  opacity?: number;
+  
+  /**
+   * Border opacity (0-1)
+   * @default 0.3
+   */
+  borderOpacity?: number;
+  
+  /**
+   * Glass preset name ('subtle' | 'default' | 'strong' | 'frost' | 'crystal')
+   */
+  preset?: 'subtle' | 'default' | 'strong' | 'frost' | 'crystal';
+}
+
+/**
+ * Apply glass effect to component
+ * Can be used as HOC or inline wrapper
+ */
+export function withGlass<P extends object>(
+  WrappedComponent: React.ComponentType<P>,
+  defaultGlassConfig?: GlassConfig
+) {
+  return function GlassEnhancedComponent(props: P & { glass?: GlassConfig | boolean }) {
+    const { glass, ...restProps } = props as any;
+    
+    if (!glass) {
+      return <WrappedComponent {...(restProps as P)} />;
+    }
+    
+    const glassConfig = glass === true ? defaultGlassConfig : glass;
+    
+    return (
+      <div className="glass-wrapper" data-glass-config={JSON.stringify(glassConfig)}>
+        <WrappedComponent {...(restProps as P)} glass={glass} />
+      </div>
+    );
+  };
+}
+
+/**
+ * Glass effect CSS-in-JS utility
+ * Returns inline styles for glass effect
+ */
+export function getGlassStyles(config: GlassConfig): React.CSSProperties {
+  const {
+    displacementScale = 20,
+    blurAmount = 10,
+    saturation = 200,
+    opacity = 0.15,
+    borderOpacity = 0.3
+  } = config;
+  
+  return {
+    background: \`rgba(255, 255, 255, \${opacity})\`,
+    backdropFilter: \`blur(\${blurAmount}px) saturate(\${saturation}%)\`,
+    WebkitBackdropFilter: \`blur(\${blurAmount}px) saturate(\${saturation}%)\`,
+    border: \`1px solid rgba(255, 255, 255, \${borderOpacity})\`,
+    boxShadow: \`
+      0 4px 6px -1px rgba(0, 0, 0, 0.1),
+      0 2px 4px -1px rgba(0, 0, 0, 0.06),
+      inset 0 1px 0 0 rgba(255, 255, 255, \${borderOpacity})
+    \`
+  };
+}
+`;
+}
+
+/**
+ * Generate complete glassmorphism package
+ */
+export async function generateGlassPackage(componentName, projectRoot, options = {}) {
+  const {
+    preset = 'default',
+    outputDir = 'src/styles/06-components',
+    force = false
+  } = options;
+  
+  const created = [];
+  const componentPrefix = componentName.toLowerCase().replace(/([A-Z])/g, '-$1').replace(/^-/, '');
+  
+  try {
+    // Create output directory
+    await filesystem.createDirectory(outputDir);
+    
+    // Generate glass styles file
+    const glassFile = join(outputDir, `_components.${componentPrefix}.glass.scss`);
+    
+    if (force || !await filesystem.exists(glassFile)) {
+      const glassContent = generateGlassStyles(componentName, preset);
+      await filesystem.writeFile(glassFile, glassContent, 'utf8');
+      created.push(`src/styles/06-components/_components.${componentPrefix}.glass.scss`);
+      logger.debug(`Created glass styles: ${glassFile}`);
+    }
+    
+    // Generate TypeScript utilities
+    const typesDir = join(projectRoot, 'src/lib/utils');
+    await filesystem.createDirectory(typesDir);
+    
+    const glassUtilsFile = join(typesDir, 'glass.ts');
+    if (force || !await filesystem.exists(glassUtilsFile)) {
+      const utilsContent = generateGlassWrapper(componentName);
+      await filesystem.writeFile(glassUtilsFile, utilsContent, 'utf8');
+      created.push('src/lib/utils/glass.ts');
+      logger.debug(`Created glass utilities: ${glassUtilsFile}`);
+    }
+    
+    return {
+      success: true,
+      created,
+      preset: GLASS_PRESETS[preset]?.name || preset,
+      message: `Generated glassmorphism package with ${created.length} files using ${preset} preset`
+    };
+    
+  } catch (error) {
+    throw new AtomixCLIError(
+      `Failed to generate glassmorphism package: ${error.message}`,
+      'GLASS_GENERATION_FAILED',
+      [
+        'Check you have write permissions for src/styles directory',
+        'Verify component name is valid PascalCase',
+        'Try running with --force flag to overwrite existing files'
+      ]
+    );
+  }
+}
+
+/**
+ * Get available glass presets
+ */
+export function getGlassPresets() {
+  return Object.keys(GLASS_PRESETS);
+}
+
+/**
+ * Validate glass configuration
+ */
+export function validateGlassConfig(config) {
+  const issues = [];
+  
+  if (config.displacementScale && (config.displacementScale < 0 || config.displacementScale > 100)) {
+    issues.push('displacementScale must be between 0 and 100');
+  }
+  
+  if (config.blurAmount && (config.blurAmount < 0 || config.blurAmount > 50)) {
+    issues.push('blurAmount must be between 0 and 50');
+  }
+  
+  if (config.saturation && (config.saturation < 100 || config.saturation > 500)) {
+    issues.push('saturation must be between 100 and 500');
+  }
+  
+  if (config.opacity && (config.opacity < 0 || config.opacity > 1)) {
+    issues.push('opacity must be between 0 and 1');
+  }
+  
+  return {
+    valid: issues.length === 0,
+    issues
+  };
+}