@nuggetwise/cli/src/core/component-variations.ts

Magic Nuggetwise CLI for Cursor IDE integration

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

export interface ComponentVariation {
  name: string;
  description: string;
  code: string;
  style: string;
  preview?: string;
}

export interface VariationRequest {
  baseComponent: string;
  prompt: string;
  style: 'modern' | 'minimal' | 'glassmorphism' | 'neon' | 'vintage';
  count?: number;
}

export class ComponentVariations {
  private gemini: GeminiClient;

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

  async generateVariations(request: VariationRequest): Promise<ComponentVariation[]> {
    try {
      const variations: ComponentVariation[] = [];
      const count = request.count || 3;

      for (let i = 0; i < count; i++) {
        const variation = await this.generateSingleVariation(request, i);
        variations.push(variation);
      }

      return variations;
    } catch (error) {
      console.error('Component variation generation error:', error);
      throw new Error(`Failed to generate variations: ${error instanceof Error ? error.message : 'Unknown error'}`);
    }
  }

  private async generateSingleVariation(
    request: VariationRequest, 
    index: number
  ): Promise<ComponentVariation> {
    const stylePrompts = {
      modern: 'modern, clean design with subtle shadows and smooth transitions',
      minimal: 'minimalist design with clean lines and plenty of whitespace',
      glassmorphism: 'glassmorphism effect with backdrop blur and transparency',
      neon: 'neon/cyberpunk style with bright colors and glowing effects',
      vintage: 'vintage/retro style with muted colors and classic typography'
    };

    const stylePrompt = stylePrompts[request.style];
    const variationName = `${request.style.charAt(0).toUpperCase() + request.style.slice(1)} ${index + 1}`;

    const prompt = `
Generate a React component variation with the following requirements:

Base Component:
${request.baseComponent}

Style Requirements:
- Style: ${stylePrompt}
- Variation Name: ${variationName}
- Additional Requirements: ${request.prompt}

Generate a complete React component that:
1. Maintains the same functionality as the base component
2. Applies the specified style consistently
3. Uses Tailwind CSS for styling
4. Includes proper TypeScript types
5. Is production-ready and follows best practices

Return only the component code, no explanations.
`;

    const response = await this.gemini.generateText({
      prompt,
      model: 'gemini-1.5-flash',
      systemPrompt: 'You are an expert React developer specializing in creating beautiful, functional component variations. Generate clean, production-ready code.',
      temperature: 0.7,
      maxTokens: 2000
    });

    const code = response.success ? response.content : '';

    return {
      name: variationName,
      description: `${request.style} variation of the component`,
      code: this.cleanCode(code),
      style: request.style
    };
  }

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

  async generateStyleGuide(component: string): Promise<string> {
    try {
      const prompt = `
Analyze this React component and generate a comprehensive style guide:

${component}

Create a style guide that includes:
1. Color palette used
2. Typography specifications
3. Spacing and layout guidelines
4. Component-specific styling rules
5. Accessibility considerations
6. Responsive design guidelines

Format the response as a clear, structured guide.
`;

      const response = await this.gemini.generateText({
        prompt,
        model: 'gemini-1.5-flash',
        systemPrompt: 'You are a UI/UX expert specializing in design systems and style guides.',
        temperature: 0.3,
        maxTokens: 1500
      });

      return response.success ? response.content : 'Style guide generation failed.';
    } catch (error) {
      console.error('Style guide generation error:', error);
      return 'Style guide generation failed.';
    }
  }
}