@friggframework/devtools 2.0.0--canary.400.bed3308.0 → 2.0.0--canary.400.545e7a8.0

package/management-ui/src/components/codegen/APIModuleSelector.jsx

@@ -1,227 +0,0 @@
-import React, { useState, useEffect, useCallback } from 'react';
-import { Card } from '../Card';
-import { Button } from '../Button';
-import LoadingSpinner from '../LoadingSpinner';
-import apiModuleService from '../../services/apiModuleService';
-
-const APIModuleSelector = ({ onSelect, selectedModule }) => {
-  const [modules, setModules] = useState([]);
-  const [loading, setLoading] = useState(true);
-  const [error, setError] = useState(null);
-  const [searchTerm, setSearchTerm] = useState('');
-  const [selectedModuleDetails, setSelectedModuleDetails] = useState(null);
-  const [loadingDetails, setLoadingDetails] = useState(false);
-
-  // Fetch available modules on mount
-  useEffect(() => {
-    loadModules();
-  }, []);
-
-  // Load module details when selection changes
-  useEffect(() => {
-    if (selectedModule) {
-      loadModuleDetails(selectedModule);
-    }
-  }, [selectedModule]);
-
-  const loadModules = async () => {
-    try {
-      setLoading(true);
-      setError(null);
-      const availableModules = await apiModuleService.getAllModules();
-      setModules(availableModules);
-    } catch (err) {
-      setError('Failed to load API modules. Please try again.');
-      console.error('Error loading modules:', err);
-    } finally {
-      setLoading(false);
-    }
-  };
-
-  const loadModuleDetails = async (moduleName) => {
-    try {
-      setLoadingDetails(true);
-      const details = await apiModuleService.getModuleDetails(moduleName);
-      setSelectedModuleDetails(details);
-    } catch (err) {
-      console.error('Error loading module details:', err);
-    } finally {
-      setLoadingDetails(false);
-    }
-  };
-
-  const handleModuleSelect = useCallback((module) => {
-    onSelect(module);
-  }, [onSelect]);
-
-  const filteredModules = modules.filter(module => 
-    module.displayName.toLowerCase().includes(searchTerm.toLowerCase()) ||
-    module.description?.toLowerCase().includes(searchTerm.toLowerCase())
-  );
-
-  if (loading) {
-    return (
-      <div className="flex items-center justify-center p-8">
-        <LoadingSpinner size="lg" />
-      </div>
-    );
-  }
-
-  if (error) {
-    return (
-      <Card className="p-6">
-        <div className="text-center">
-          <p className="text-red-600 mb-4">{error}</p>
-          <Button onClick={loadModules}>Retry</Button>
-        </div>
-      </Card>
-    );
-  }
-
-  return (
-    <div className="space-y-6">
-      <div>
-        <h3 className="text-lg font-medium mb-4">Select an API Module</h3>
-        
-        {/* Search Bar */}
-        <div className="mb-4">
-          <input
-            type="text"
-            value={searchTerm}
-            onChange={(e) => setSearchTerm(e.target.value)}
-            placeholder="Search API modules..."
-            className="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
-          />
-        </div>
-
-        {/* Module Grid */}
-        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
-          {filteredModules.map((module) => (
-            <Card
-              key={module.name}
-              className={`p-4 cursor-pointer transition-all ${
-                selectedModule === module.name
-                  ? 'ring-2 ring-blue-500 shadow-lg'
-                  : 'hover:shadow-md'
-              }`}
-              onClick={() => handleModuleSelect(module.name)}
-            >
-              <div className="flex items-start justify-between">
-                <div className="flex-1">
-                  <h4 className="font-semibold text-gray-900">{module.displayName}</h4>
-                  <p className="text-sm text-gray-600 mt-1 line-clamp-2">
-                    {module.description || 'No description available'}
-                  </p>
-                  <div className="mt-2 flex items-center text-xs text-gray-500">
-                    <span>v{module.version}</span>
-                    {module.date && (
-                      <>
-                        <span className="mx-2">•</span>
-                        <span>{new Date(module.date).toLocaleDateString()}</span>
-                      </>
-                    )}
-                  </div>
-                </div>
-                {selectedModule === module.name && (
-                  <div className="ml-2">
-                    <svg className="w-5 h-5 text-blue-500" fill="currentColor" viewBox="0 0 20 20">
-                      <path fillRule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clipRule="evenodd" />
-                    </svg>
-                  </div>
-                )}
-              </div>
-            </Card>
-          ))}
-        </div>
-
-        {filteredModules.length === 0 && (
-          <div className="text-center py-8 text-gray-500">
-            No modules found matching "{searchTerm}"
-          </div>
-        )}
-      </div>
-
-      {/* Selected Module Details */}
-      {selectedModule && selectedModuleDetails && (
-        <Card className="p-6">
-          <h4 className="text-lg font-semibold mb-4">Module Details</h4>
-          
-          {loadingDetails ? (
-            <div className="flex items-center justify-center py-8">
-              <LoadingSpinner />
-            </div>
-          ) : (
-            <div className="space-y-4">
-              <div>
-                <h5 className="font-medium text-gray-900">{selectedModuleDetails.displayName}</h5>
-                <p className="text-sm text-gray-600 mt-1">{selectedModuleDetails.description}</p>
-              </div>
-
-              <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
-                <div>
-                  <span className="text-sm font-medium text-gray-700">Package:</span>
-                  <p className="text-sm text-gray-900">{selectedModuleDetails.name}</p>
-                </div>
-                <div>
-                  <span className="text-sm font-medium text-gray-700">Version:</span>
-                  <p className="text-sm text-gray-900">{selectedModuleDetails.version}</p>
-                </div>
-                <div>
-                  <span className="text-sm font-medium text-gray-700">Auth Type:</span>
-                  <p className="text-sm text-gray-900 capitalize">{selectedModuleDetails.authType}</p>
-                </div>
-                {selectedModuleDetails.homepage && (
-                  <div>
-                    <span className="text-sm font-medium text-gray-700">Documentation:</span>
-                    <a 
-                      href={selectedModuleDetails.homepage} 
-                      target="_blank" 
-                      rel="noopener noreferrer"
-                      className="text-sm text-blue-600 hover:underline"
-                    >
-                      View Docs
-                    </a>
-                  </div>
-                )}
-              </div>
-
-              {selectedModuleDetails.requiredFields && selectedModuleDetails.requiredFields.length > 0 && (
-                <div>
-                  <h5 className="font-medium text-gray-900 mb-2">Required Configuration</h5>
-                  <div className="bg-gray-50 rounded-md p-3">
-                    <ul className="space-y-1">
-                      {selectedModuleDetails.requiredFields.map((field, index) => (
-                        <li key={index} className="text-sm flex items-center justify-between">
-                          <span className="font-medium">{field.label}</span>
-                          <span className="text-gray-600">{field.type}</span>
-                        </li>
-                      ))}
-                    </ul>
-                  </div>
-                </div>
-              )}
-
-              {selectedModuleDetails.keywords && selectedModuleDetails.keywords.length > 0 && (
-                <div>
-                  <h5 className="font-medium text-gray-900 mb-2">Tags</h5>
-                  <div className="flex flex-wrap gap-2">
-                    {selectedModuleDetails.keywords.map((keyword, index) => (
-                      <span 
-                        key={index}
-                        className="px-2 py-1 text-xs bg-gray-100 text-gray-700 rounded-md"
-                      >
-                        {keyword}
-                      </span>
-                    ))}
-                  </div>
-                </div>
-              )}
-            </div>
-          )}
-        </Card>
-      )}
-    </div>
-  );
-};
-
-export default APIModuleSelector;

package/management-ui/src/components/codegen/CodeGenerationWizard.jsx

@@ -1,247 +0,0 @@
-import React, { useState, useCallback } from 'react';
-import { Card } from '../Card';
-import { Button } from '../Button';
-import TemplateSelector from './TemplateSelector';
-import IntegrationGenerator from './IntegrationGenerator';
-import APIEndpointGenerator from './APIEndpointGenerator';
-import ProjectScaffoldWizard from './ProjectScaffoldWizard';
-import CodePreviewEditor from './CodePreviewEditor';
-
-const GENERATION_TYPES = {
-  API_MODULE: 'api-module',
-  API_ENDPOINT: 'api-endpoint',
-  PROJECT_SCAFFOLD: 'project-scaffold',
-  CUSTOM: 'custom'
-};
-
-const CodeGenerationWizard = () => {
-  const [currentStep, setCurrentStep] = useState('select-type');
-  const [generationType, setGenerationType] = useState(null);
-  const [generatedCode, setGeneratedCode] = useState(null);
-  const [metadata, setMetadata] = useState({});
-
-  const steps = [
-    { id: 'select-type', title: 'Select Generation Type' },
-    { id: 'configure', title: 'Configure Options' },
-    { id: 'preview', title: 'Preview & Edit' },
-    { id: 'generate', title: 'Generate Files' }
-  ];
-
-  const handleTypeSelection = useCallback((type) => {
-    setGenerationType(type);
-    setCurrentStep('configure');
-  }, []);
-
-  const handleConfiguration = useCallback((config, code, meta) => {
-    setGeneratedCode(code);
-    setMetadata(meta);
-    setCurrentStep('preview');
-  }, []);
-
-  const handleCodeUpdate = useCallback((updatedCode) => {
-    setGeneratedCode(updatedCode);
-  }, []);
-
-  const handleGenerate = useCallback(async () => {
-    try {
-      const response = await fetch('/api/codegen/generate', {
-        method: 'POST',
-        headers: {
-          'Content-Type': 'application/json',
-        },
-        body: JSON.stringify({
-          type: generationType,
-          code: generatedCode,
-          metadata
-        }),
-      });
-
-      if (response.ok) {
-        const result = await response.json();
-        alert(`Code generated successfully! Files created: ${result.files.join(', ')}`);
-        setCurrentStep('select-type');
-        setGenerationType(null);
-        setGeneratedCode(null);
-        setMetadata({});
-      } else {
-        throw new Error('Failed to generate code');
-      }
-    } catch (error) {
-      console.error('Generation error:', error);
-      alert('Failed to generate code. Please try again.');
-    }
-  }, [generationType, generatedCode, metadata]);
-
-  const renderStepIndicator = () => (
-    <div className="flex items-center justify-center mb-8">
-      {steps.map((step, index) => (
-        <React.Fragment key={step.id}>
-          <div className={`flex items-center ${
-            step.id === currentStep 
-              ? 'text-blue-600' 
-              : steps.findIndex(s => s.id === currentStep) > index
-                ? 'text-green-600'
-                : 'text-gray-400'
-          }`}>
-            <div className={`w-8 h-8 rounded-full flex items-center justify-center border-2 ${
-              step.id === currentStep
-                ? 'border-blue-600 bg-blue-50'
-                : steps.findIndex(s => s.id === currentStep) > index
-                  ? 'border-green-600 bg-green-50'
-                  : 'border-gray-300 bg-gray-50'
-            }`}>
-              {steps.findIndex(s => s.id === currentStep) > index ? (
-                <svg className="w-4 h-4" fill="currentColor" viewBox="0 0 20 20">
-                  <path fillRule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clipRule="evenodd" />
-                </svg>
-              ) : (
-                <span className="text-sm font-medium">{index + 1}</span>
-              )}
-            </div>
-            <span className="ml-2 text-sm font-medium">{step.title}</span>
-          </div>
-          {index < steps.length - 1 && (
-            <div className="w-16 h-px bg-gray-300 mx-4" />
-          )}
-        </React.Fragment>
-      ))}
-    </div>
-  );
-
-  const renderCurrentStep = () => {
-    switch (currentStep) {
-      case 'select-type':
-        return (
-          <div className="space-y-6">
-            <h2 className="text-2xl font-bold text-center mb-8">What would you like to generate?</h2>
-            <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
-              <Card 
-                className="cursor-pointer hover:shadow-lg transition-shadow p-6"
-                onClick={() => handleTypeSelection(GENERATION_TYPES.API_MODULE)}
-              >
-                <div className="text-center">
-                  <div className="w-12 h-12 bg-blue-100 rounded-lg flex items-center justify-center mx-auto mb-4">
-                    <svg className="w-6 h-6 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10" />
-                    </svg>
-                  </div>
-                  <h3 className="text-lg font-semibold mb-2">API Module</h3>
-                  <p className="text-gray-600">Generate an API wrapper class for external service communication with authentication and credential storage</p>
-                </div>
-              </Card>
-
-              <Card 
-                className="cursor-pointer hover:shadow-lg transition-shadow p-6"
-                onClick={() => handleTypeSelection(GENERATION_TYPES.API_ENDPOINT)}
-              >
-                <div className="text-center">
-                  <div className="w-12 h-12 bg-green-100 rounded-lg flex items-center justify-center mx-auto mb-4">
-                    <svg className="w-6 h-6 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M8.684 13.342C8.886 12.938 9 12.482 9 12c0-.482-.114-.938-.316-1.342m0 2.684a3 3 0 110-2.684m0 2.684l6.632 3.316m-6.632-6l6.632-3.316m0 0a3 3 0 105.367-2.684 3 3 0 00-5.367 2.684zm0 9.316a3 3 0 105.367 2.684 3 3 0 00-5.367-2.684z" />
-                    </svg>
-                  </div>
-                  <h3 className="text-lg font-semibold mb-2">API Endpoints</h3>
-                  <p className="text-gray-600">Create REST API endpoints with schemas, validation, and documentation</p>
-                </div>
-              </Card>
-
-              <Card 
-                className="cursor-pointer hover:shadow-lg transition-shadow p-6"
-                onClick={() => handleTypeSelection(GENERATION_TYPES.PROJECT_SCAFFOLD)}
-              >
-                <div className="text-center">
-                  <div className="w-12 h-12 bg-purple-100 rounded-lg flex items-center justify-center mx-auto mb-4">
-                    <svg className="w-6 h-6 text-purple-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4" />
-                    </svg>
-                  </div>
-                  <h3 className="text-lg font-semibold mb-2">Project Scaffold</h3>
-                  <p className="text-gray-600">Create a complete Frigg backend project with integrations and configuration</p>
-                </div>
-              </Card>
-
-              <Card 
-                className="cursor-pointer hover:shadow-lg transition-shadow p-6"
-                onClick={() => handleTypeSelection(GENERATION_TYPES.CUSTOM)}
-              >
-                <div className="text-center">
-                  <div className="w-12 h-12 bg-orange-100 rounded-lg flex items-center justify-center mx-auto mb-4">
-                    <svg className="w-6 h-6 text-orange-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z" />
-                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
-                    </svg>
-                  </div>
-                  <h3 className="text-lg font-semibold mb-2">Custom Template</h3>
-                  <p className="text-gray-600">Use custom templates or modify existing ones to fit your specific needs</p>
-                </div>
-              </Card>
-            </div>
-          </div>
-        );
-
-      case 'configure':
-        return (
-          <div>
-            {generationType === GENERATION_TYPES.API_MODULE && (
-              <IntegrationGenerator onGenerate={handleConfiguration} />
-            )}
-            {generationType === GENERATION_TYPES.API_ENDPOINT && (
-              <APIEndpointGenerator onGenerate={handleConfiguration} />
-            )}
-            {generationType === GENERATION_TYPES.PROJECT_SCAFFOLD && (
-              <ProjectScaffoldWizard onGenerate={handleConfiguration} />
-            )}
-            {generationType === GENERATION_TYPES.CUSTOM && (
-              <TemplateSelector onGenerate={handleConfiguration} />
-            )}
-          </div>
-        );
-
-      case 'preview':
-        return (
-          <div>
-            <h2 className="text-2xl font-bold mb-6">Preview & Edit Generated Code</h2>
-            <CodePreviewEditor 
-              code={generatedCode}
-              metadata={metadata}
-              onChange={handleCodeUpdate}
-            />
-            <div className="flex justify-between mt-6">
-              <Button 
-                variant="outline"
-                onClick={() => setCurrentStep('configure')}
-              >
-                Back to Configuration
-              </Button>
-              <Button 
-                onClick={handleGenerate}
-                className="bg-green-600 hover:bg-green-700"
-              >
-                Generate Files
-              </Button>
-            </div>
-          </div>
-        );
-
-      default:
-        return null;
-    }
-  };
-
-  return (
-    <div className="max-w-6xl mx-auto p-6">
-      <div className="mb-8">
-        <h1 className="text-3xl font-bold text-center mb-2">Code Generation Wizard</h1>
-        <p className="text-gray-600 text-center">Generate integrations, APIs, and scaffolds with visual tools</p>
-      </div>
-
-      {renderStepIndicator()}
-      
-      <Card className="p-8">
-        {renderCurrentStep()}
-      </Card>
-    </div>
-  );
-};
-
-export default CodeGenerationWizard;