@nuggetwise/cli/src/core/advanced-styling.ts

Magic Nuggetwise CLI for Cursor IDE integration

import { GeminiClient } from './gemini-client.js';

export interface StylingRequest {
  component: string;
  style: 'glassmorphism' | 'animations' | 'hover-effects' | 'gradients' | 'shadows';
  intensity?: 'subtle' | 'moderate' | 'bold';
}

export interface StylingResult {
  component: string;
  css: string;
  description: string;
  preview?: string;
}

export class AdvancedStyling {
  private gemini: GeminiClient;

  constructor(apiKey: string) {
    this.gemini = new GeminiClient(apiKey);
  }

  async applyAdvancedStyling(request: StylingRequest): Promise<StylingResult> {
    try {
      const prompt = this.buildStylingPrompt(request);
      
      const response = await this.gemini.generateText({
        prompt,
        model: 'gemini-1.5-flash',
        systemPrompt: 'You are an expert CSS and React developer specializing in modern, beautiful styling techniques. Generate clean, production-ready code with Tailwind CSS.',
        temperature: 0.7,
        maxTokens: 2500
      });

      const result = response.success ? response.content : '';
      const { component, css } = this.parseStylingResult(result);

      return {
        component: this.cleanCode(component),
        css: this.cleanCode(css),
        description: `${request.style} styling applied with ${request.intensity || 'moderate'} intensity`
      };
    } catch (error) {
      console.error('Advanced styling error:', error);
      throw new Error(`Failed to apply advanced styling: ${error instanceof Error ? error.message : 'Unknown error'}`);
    }
  }

  private buildStylingPrompt(request: StylingRequest): string {
    const styleGuides = {
      glassmorphism: {
        subtle: 'subtle backdrop blur with light transparency',
        moderate: 'medium backdrop blur with glass-like transparency and subtle borders',
        bold: 'strong backdrop blur with high transparency and prominent glass effects'
      },
      animations: {
        subtle: 'gentle fade-in and smooth transitions',
        moderate: 'smooth animations with hover effects and micro-interactions',
        bold: 'dynamic animations with entrance effects and interactive feedback'
      },
      'hover-effects': {
        subtle: 'gentle hover state changes',
        moderate: 'smooth hover transitions with scale and color changes',
        bold: 'dramatic hover effects with transforms and visual feedback'
      },
      gradients: {
        subtle: 'soft gradient backgrounds',
        moderate: 'medium gradient effects with color transitions',
        bold: 'vibrant gradient effects with multiple color stops'
      },
      shadows: {
        subtle: 'soft, natural shadows',
        moderate: 'medium depth shadows with layering',
        bold: 'dramatic shadows with depth and dimension'
      }
    };

    const styleGuide = styleGuides[request.style][request.intensity || 'moderate'];

    return `
Apply ${request.style} styling to this React component with ${request.intensity || 'moderate'} intensity:

Component:
${request.component}

Styling Requirements:
- Style: ${request.style}
- Intensity: ${request.intensity || 'moderate'}
- Effect: ${styleGuide}
- Use Tailwind CSS classes
- Maintain component functionality
- Ensure accessibility
- Make it responsive

Generate:
1. The updated React component with Tailwind CSS classes
2. Any additional CSS needed (if Tailwind classes aren't sufficient)
3. Brief description of the styling applied

Format the response as:
COMPONENT:
[updated component code]

CSS:
[additional CSS if needed]

DESCRIPTION:
[styling description]
`;
  }

  private parseStylingResult(result: string): { component: string; css: string } {
    const componentMatch = result.match(/COMPONENT:\s*([\s\S]*?)(?=CSS:|DESCRIPTION:|$)/i);
    const cssMatch = result.match(/CSS:\s*([\s\S]*?)(?=DESCRIPTION:|COMPONENT:|$)/i);

    return {
      component: componentMatch ? componentMatch[1].trim() : result,
      css: cssMatch ? cssMatch[1].trim() : ''
    };
  }

  private cleanCode(code: string): string {
    return code
      .replace(/```(jsx|tsx|javascript|typescript|css)?\n?/g, '')
      .replace(/```\n?/g, '')
      .trim();
  }

  async generateGlassmorphismCSS(): Promise<string> {
    return `
/* Glassmorphism CSS Utilities */
.glassmorphism {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
}

.glassmorphism-card {
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(15px);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 16px;
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
}

.glassmorphism-button {
  background: rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.3);
  transition: all 0.3s ease;
}

.glassmorphism-button:hover {
  background: rgba(255, 255, 255, 0.3);
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
}

.glassmorphism-input {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 8px;
}

.glassmorphism-input:focus {
  background: rgba(255, 255, 255, 0.15);
  border-color: rgba(255, 255, 255, 0.4);
  outline: none;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.1);
}
`;
  }

  async generateAnimationCSS(): Promise<string> {
    return `
/* Animation CSS Utilities */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes slideIn {
  from { transform: translateX(-100%); }
  to { transform: translateX(0); }
}

@keyframes scaleIn {
  from { transform: scale(0.9); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}

@keyframes pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.05); }
}

.animate-fade-in {
  animation: fadeIn 0.6s ease-out;
}

.animate-slide-in {
  animation: slideIn 0.5s ease-out;
}

.animate-scale-in {
  animation: scaleIn 0.4s ease-out;
}

.animate-pulse {
  animation: pulse 2s infinite;
}

.hover-lift {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.hover-lift:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
}

.hover-glow {
  transition: box-shadow 0.3s ease;
}

.hover-glow:hover {
  box-shadow: 0 0 20px rgba(59, 130, 246, 0.5);
}
`;
  }
}