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

package/management-ui/src/components/IntegrationCard.jsx

@@ -1,199 +0,0 @@
-import React, { useState } from 'react'
-import { Download, CheckCircle, ExternalLink, Settings, AlertCircle } from 'lucide-react'
-import { Card, CardContent } from './ui/card'
-import { Button } from './ui/button'
-import LoadingSpinner from './LoadingSpinner'
-import { cn } from '../lib/utils'
-
-const IntegrationCard = ({
-  integration,
-  onInstall,
-  onConfigure,
-  onUninstall,
-  installing = false,
-  className,
-  ...props
-}) => {
-  const [showDetails, setShowDetails] = useState(false)
-  const isInstalled = integration.installed || integration.status === 'installed'
-  const isInstalling = installing || integration.status === 'installing'
-  const hasError = integration.status === 'error'
-
-  const handleInstall = async () => {
-    if (onInstall && !isInstalled && !isInstalling) {
-      await onInstall(integration.name)
-    }
-  }
-
-  const handleConfigure = () => {
-    if (onConfigure && isInstalled) {
-      onConfigure(integration.name)
-    }
-  }
-
-  const handleUninstall = async () => {
-    if (onUninstall && isInstalled) {
-      await onUninstall(integration.name)
-    }
-  }
-
-  // Filter out invalid DOM props
-  const { onUpdate, onTest, uninstalling, updating, error, ...cardProps } = props
-
-  return (
-    <Card className={cn('hover:shadow-lg industrial-transition', className)} {...cardProps}>
-      <CardContent className="p-6">
-        <div className="flex items-start justify-between mb-4">
-          <div className="flex-1">
-            <div className="flex items-center mb-2">
-              <h4 className="font-semibold text-foreground text-lg">
-                {integration.displayName || integration.name}
-              </h4>
-              {integration.version && (
-                <span className="ml-2 text-xs bg-muted text-muted-foreground px-2 py-1 sharp-badge">
-                  v{integration.version}
-                </span>
-              )}
-            </div>
-            <p className="text-sm text-muted-foreground mb-3">
-              {integration.description || 'No description available'}
-            </p>
-            {integration.tags && integration.tags.length > 0 && (
-              <div className="flex flex-wrap gap-1 mb-3">
-                {integration.tags.map((tag, index) => (
-                  <span
-                    key={index}
-                    className="text-xs bg-primary/10 text-primary px-2 py-1 sharp-badge"
-                  >
-                    {tag}
-                  </span>
-                ))}
-              </div>
-            )}
-          </div>
-          <div className="flex items-center ml-4">
-            {hasError && (
-              <AlertCircle size={20} className="text-red-500 mr-2" />
-            )}
-            {isInstalled && !hasError && (
-              <CheckCircle size={20} className="text-green-500 mr-2" />
-            )}
-            {isInstalling && (
-              <LoadingSpinner size="sm" className="mr-2" />
-            )}
-          </div>
-        </div>
-
-        <div className="flex items-center justify-between">
-          <div className="flex items-center space-x-2">
-            {!isInstalled && !isInstalling && (
-              <Button
-                size="sm"
-                onClick={handleInstall}
-                disabled={isInstalling}
-                className="inline-flex items-center"
-              >
-                <Download size={16} className="mr-1" />
-                Install
-              </Button>
-            )}
-            
-            {isInstalled && !hasError && (
-              <Button
-                size="sm"
-                variant="outline"
-                onClick={handleConfigure}
-                className="inline-flex items-center"
-              >
-                <Settings size={16} className="mr-1" />
-                Configure
-              </Button>
-            )}
-            
-            {isInstalling && (
-              <Button size="sm" disabled className="inline-flex items-center">
-                <LoadingSpinner size="sm" className="mr-1" />
-                Installing...
-              </Button>
-            )}
-            
-            {hasError && (
-              <Button
-                size="sm"
-                variant="destructive"
-                onClick={handleInstall}
-                className="inline-flex items-center"
-              >
-                <AlertCircle size={16} className="mr-1" />
-                Retry
-              </Button>
-            )}
-          </div>
-          <div className="flex items-center space-x-2">
-            {integration.docsUrl && (
-              <Button
-                size="sm"
-                variant="ghost"
-                onClick={() => window.open(integration.docsUrl, '_blank')}
-                className="inline-flex items-center text-xs"
-              >
-                <ExternalLink size={14} className="mr-1" />
-                Docs
-              </Button>
-            )}
-            
-            {isInstalled && (
-              <Button
-                size="sm"
-                variant="ghost"
-                onClick={() => setShowDetails(!showDetails)}
-                className="text-xs"
-              >
-                {showDetails ? 'Less' : 'More'}
-              </Button>
-            )}
-          </div>
-        </div>
-
-        {showDetails && isInstalled && (
-          <div className="mt-4 pt-4 border-t border-border">
-            <div className="space-y-2 text-sm">
-              {integration.endpoints && (
-                <div>
-                  <span className="font-medium text-foreground">Endpoints:</span>
-                  <span className="ml-2 text-muted-foreground">{integration.endpoints.length}</span>
-                </div>
-              )}
-              {integration.lastUpdated && (
-                <div>
-                  <span className="font-medium text-foreground">Last Updated:</span>
-                  <span className="ml-2 text-muted-foreground">
-                    {new Date(integration.lastUpdated).toLocaleDateString()}
-                  </span>
-                </div>
-              )}
-              {integration.connections && (
-                <div>
-                  <span className="font-medium text-foreground">Active Connections:</span>
-                  <span className="ml-2 text-muted-foreground">{integration.connections}</span>
-                </div>
-              )}
-            </div>
-            <div className="mt-3 flex justify-end">
-              <Button
-                size="sm"
-                variant="destructive"
-                onClick={handleUninstall}
-                className="inline-flex items-center text-xs"
-              >
-                Uninstall
-              </Button>
-            </div>
-          </div>
-        )}
-      </CardContent>
-    </Card>
-  )
-}
-
-export default IntegrationCard

package/management-ui/src/components/IntegrationCardEnhanced.jsx

@@ -1,490 +0,0 @@
-import React, { useState } from 'react'
-import { 
-  Download, CheckCircle, ExternalLink, Settings, AlertCircle, 
-  RefreshCw, TestTube, Info, Clock, TrendingUp, Shield,
-  ChevronDown, ChevronUp
-} from 'lucide-react'
-import { Card, CardContent } from './Card'
-import { Button } from './Button'
-import LoadingSpinner from './LoadingSpinner'
-import { cn } from '../lib/utils'
-
-const IntegrationCardEnhanced = ({ 
-  integration, 
-  onInstall, 
-  onUninstall,
-  onUpdate,
-  onConfigure, 
-  onTest,
-  onViewDetails,
-  installing = false,
-  uninstalling = false,
-  updating = false,
-  error = false,
-  message = '',
-  progress = 0,
-  className,
-  viewMode = 'grid',
-  ...props 
-}) => {
-  const [expanded, setExpanded] = useState(false)
-  const [showDetails, setShowDetails] = useState(false)
-  
-  const isInstalled = integration.installed || integration.status === 'installed'
-  const isProcessing = installing || uninstalling || updating
-  const hasUpdate = integration.updateAvailable
-  const isOfficial = integration.isOfficial
-
-  const getStatusIcon = () => {
-    if (error) return <AlertCircle size={20} className="text-red-500" />
-    if (isProcessing) return <LoadingSpinner size="sm" />
-    if (isInstalled) return <CheckCircle size={20} className="text-green-500" />
-    return null
-  }
-
-  const getProgressBarColor = () => {
-    if (error) return 'bg-red-500'
-    if (uninstalling) return 'bg-orange-500'
-    if (updating) return 'bg-blue-500'
-    return 'bg-green-500'
-  }
-
-  const formatCategory = (category) => {
-    return category?.replace(/-/g, ' ').replace(/\b\w/g, l => l.toUpperCase()) || 'Other'
-  }
-
-  const handleAction = async (action, handler) => {
-    if (handler && !isProcessing) {
-      await handler(integration.name)
-    }
-  }
-
-  // List view layout
-  if (viewMode === 'list') {
-    return (
-      <Card className={cn('hover:shadow-md transition-shadow', className)} {...props}>
-        <CardContent className="p-4">
-          <div className="flex items-center justify-between">
-            {/* Left side - Integration info */}
-            <div className="flex items-center flex-1">
-              <div className="flex-shrink-0 mr-4">
-                {getStatusIcon()}
-              </div>
-              
-              <div className="flex-1">
-                <div className="flex items-center mb-1">
-                  <h4 className="font-semibold text-gray-900">
-                    {integration.displayName || integration.name}
-                  </h4>
-                  {integration.version && (
-                    <span className="ml-2 text-xs bg-gray-100 text-gray-600 px-2 py-0.5 rounded">
-                      v{integration.version}
-                    </span>
-                  )}
-                  {hasUpdate && (
-                    <span className="ml-2 text-xs bg-blue-100 text-blue-700 px-2 py-0.5 rounded flex items-center">
-                      <TrendingUp size={10} className="mr-1" />
-                      Update available
-                    </span>
-                  )}
-                  {isOfficial && (
-                    <span className="ml-2 text-xs bg-green-100 text-green-700 px-2 py-0.5 rounded flex items-center">
-                      <Shield size={10} className="mr-1" />
-                      Official
-                    </span>
-                  )}
-                </div>
-                
-                <p className="text-sm text-gray-600 mb-2">
-                  {integration.description || 'No description available'}
-                </p>
-                
-                {/* Tags and category */}
-                <div className="flex items-center gap-2">
-                  <span className="text-xs bg-gray-200 text-gray-700 px-2 py-0.5 rounded">
-                    {formatCategory(integration.category)}
-                  </span>
-                  {integration.tags?.slice(0, 3).map((tag, index) => (
-                    <span
-                      key={index}
-                      className="text-xs bg-blue-100 text-blue-700 px-2 py-0.5 rounded"
-                    >
-                      {tag}
-                    </span>
-                  ))}
-                  {integration.tags?.length > 3 && (
-                    <span className="text-xs text-gray-500">
-                      +{integration.tags.length - 3} more
-                    </span>
-                  )}
-                </div>
-              </div>
-            </div>
-
-            {/* Right side - Actions */}
-            <div className="flex items-center gap-2 ml-4">
-              {!isInstalled && !isProcessing && (
-                <Button
-                  size="sm"
-                  onClick={() => handleAction('install', onInstall)}
-                  className="inline-flex items-center"
-                >
-                  <Download size={16} className="mr-1" />
-                  Install
-                </Button>
-              )}
-              
-              {isInstalled && !isProcessing && (
-                <>
-                  <Button
-                    size="sm"
-                    variant="outline"
-                    onClick={() => handleAction('configure', onConfigure)}
-                    className="inline-flex items-center"
-                  >
-                    <Settings size={16} className="mr-1" />
-                    Configure
-                  </Button>
-                  {hasUpdate && (
-                    <Button
-                      size="sm"
-                      variant="outline"
-                      onClick={() => handleAction('update', onUpdate)}
-                      className="inline-flex items-center text-blue-600 hover:text-blue-700"
-                    >
-                      <RefreshCw size={16} className="mr-1" />
-                      Update
-                    </Button>
-                  )}
-                </>
-              )}
-              
-              {isProcessing && (
-                <Button size="sm" disabled className="inline-flex items-center min-w-[100px]">
-                  <LoadingSpinner size="sm" className="mr-1" />
-                  {installing && 'Installing'}
-                  {uninstalling && 'Uninstalling'}
-                  {updating && 'Updating'}
-                </Button>
-              )}
-
-              <Button
-                size="sm"
-                variant="ghost"
-                onClick={() => setExpanded(!expanded)}
-                className="ml-2"
-              >
-                {expanded ? <ChevronUp size={16} /> : <ChevronDown size={16} />}
-              </Button>
-            </div>
-          </div>
-
-          {/* Progress bar */}
-          {isProcessing && progress > 0 && (
-            <div className="mt-3">
-              <div className="w-full bg-gray-200 rounded-full h-2">
-                <div 
-                  className={cn("h-2 rounded-full transition-all", getProgressBarColor())}
-                  style={{ width: `${progress}%` }}
-                />
-              </div>
-              {message && (
-                <p className="text-xs text-gray-600 mt-1">{message}</p>
-              )}
-            </div>
-          )}
-
-          {/* Error message */}
-          {error && message && (
-            <div className="mt-3 text-sm text-red-600 flex items-start">
-              <AlertCircle size={16} className="mr-1 flex-shrink-0 mt-0.5" />
-              {message}
-            </div>
-          )}
-
-          {/* Expanded details */}
-          {expanded && (
-            <div className="mt-4 pt-4 border-t border-gray-200">
-              <div className="grid grid-cols-2 gap-4 text-sm">
-                <div>
-                  <span className="font-medium text-gray-700">Package:</span>
-                  <span className="ml-2 text-gray-600 font-mono text-xs">{integration.name}</span>
-                </div>
-                {integration.author && (
-                  <div>
-                    <span className="font-medium text-gray-700">Author:</span>
-                    <span className="ml-2 text-gray-600">{integration.author}</span>
-                  </div>
-                )}
-                {integration.lastUpdated && (
-                  <div>
-                    <span className="font-medium text-gray-700">Last Updated:</span>
-                    <span className="ml-2 text-gray-600">
-                      {new Date(integration.lastUpdated).toLocaleDateString()}
-                    </span>
-                  </div>
-                )}
-                {integration.connections !== undefined && (
-                  <div>
-                    <span className="font-medium text-gray-700">Active Connections:</span>
-                    <span className="ml-2 text-gray-600">{integration.connections}</span>
-                  </div>
-                )}
-              </div>
-              
-              {isInstalled && (
-                <div className="mt-4 flex justify-end gap-2">
-                  {onTest && (
-                    <Button
-                      size="sm"
-                      variant="outline"
-                      onClick={() => handleAction('test', onTest)}
-                      className="inline-flex items-center text-xs"
-                    >
-                      <TestTube size={14} className="mr-1" />
-                      Test
-                    </Button>
-                  )}
-                  <Button
-                    size="sm"
-                    variant="destructive"
-                    onClick={() => handleAction('uninstall', onUninstall)}
-                    className="inline-flex items-center text-xs"
-                  >
-                    Uninstall
-                  </Button>
-                </div>
-              )}
-            </div>
-          )}
-        </CardContent>
-      </Card>
-    )
-  }
-
-  // Grid view layout (default)
-  return (
-    <Card className={cn('hover:shadow-md transition-shadow', className)} {...props}>
-      <CardContent className="p-6">
-        <div className="flex items-start justify-between mb-4">
-          <div className="flex-1">
-            <div className="flex items-center mb-2">
-              <h4 className="font-semibold text-gray-900 text-lg">
-                {integration.displayName || integration.name}
-              </h4>
-              {integration.version && (
-                <span className="ml-2 text-xs bg-gray-100 text-gray-600 px-2 py-1 rounded">
-                  v{integration.version}
-                </span>
-              )}
-            </div>
-            
-            {/* Badges */}
-            <div className="flex items-center gap-2 mb-3">
-              {hasUpdate && (
-                <span className="text-xs bg-blue-100 text-blue-700 px-2 py-0.5 rounded flex items-center">
-                  <TrendingUp size={10} className="mr-1" />
-                  Update available
-                </span>
-              )}
-              {isOfficial && (
-                <span className="text-xs bg-green-100 text-green-700 px-2 py-0.5 rounded flex items-center">
-                  <Shield size={10} className="mr-1" />
-                  Official
-                </span>
-              )}
-              <span className="text-xs bg-gray-200 text-gray-700 px-2 py-0.5 rounded">
-                {formatCategory(integration.category)}
-              </span>
-            </div>
-            
-            <p className="text-sm text-gray-600 mb-3">
-              {integration.description || 'No description available'}
-            </p>
-            
-            {integration.tags && integration.tags.length > 0 && (
-              <div className="flex flex-wrap gap-1 mb-3">
-                {integration.tags.map((tag, index) => (
-                  <span
-                    key={index}
-                    className="text-xs bg-blue-100 text-blue-700 px-2 py-1 rounded-full"
-                  >
-                    {tag}
-                  </span>
-                ))}
-              </div>
-            )}
-          </div>
-          
-          <div className="flex items-center ml-4">
-            {getStatusIcon()}
-          </div>
-        </div>
-
-        {/* Progress bar */}
-        {isProcessing && progress > 0 && (
-          <div className="mb-4">
-            <div className="w-full bg-gray-200 rounded-full h-2">
-              <div 
-                className={cn("h-2 rounded-full transition-all", getProgressBarColor())}
-                style={{ width: `${progress}%` }}
-              />
-            </div>
-            {message && (
-              <p className="text-xs text-gray-600 mt-1">{message}</p>
-            )}
-          </div>
-        )}
-
-        {/* Error message */}
-        {error && message && (
-          <div className="mb-4 text-sm text-red-600 flex items-start">
-            <AlertCircle size={16} className="mr-1 flex-shrink-0 mt-0.5" />
-            {message}
-          </div>
-        )}
-
-        <div className="flex items-center justify-between">
-          <div className="flex items-center space-x-2">
-            {!isInstalled && !isProcessing && (
-              <Button
-                size="sm"
-                onClick={() => handleAction('install', onInstall)}
-                className="inline-flex items-center"
-              >
-                <Download size={16} className="mr-1" />
-                Install
-              </Button>
-            )}
-            
-            {isInstalled && !isProcessing && (
-              <>
-                <Button
-                  size="sm"
-                  variant="outline"
-                  onClick={() => handleAction('configure', onConfigure)}
-                  className="inline-flex items-center"
-                >
-                  <Settings size={16} className="mr-1" />
-                  Configure
-                </Button>
-                {hasUpdate && (
-                  <Button
-                    size="sm"
-                    variant="outline"
-                    onClick={() => handleAction('update', onUpdate)}
-                    className="inline-flex items-center text-blue-600 hover:text-blue-700"
-                  >
-                    <RefreshCw size={16} className="mr-1" />
-                    Update
-                  </Button>
-                )}
-              </>
-            )}
-            
-            {isProcessing && (
-              <Button size="sm" disabled className="inline-flex items-center">
-                <LoadingSpinner size="sm" className="mr-1" />
-                {installing && 'Installing...'}
-                {uninstalling && 'Uninstalling...'}
-                {updating && 'Updating...'}
-              </Button>
-            )}
-          </div>
-          
-          <div className="flex items-center space-x-2">
-            {integration.docsUrl && (
-              <Button
-                size="sm"
-                variant="ghost"
-                onClick={() => window.open(integration.docsUrl, '_blank')}
-                className="inline-flex items-center text-xs"
-              >
-                <ExternalLink size={14} className="mr-1" />
-                Docs
-              </Button>
-            )}
-            
-            {onViewDetails && (
-              <Button
-                size="sm"
-                variant="ghost"
-                onClick={() => onViewDetails(integration.name)}
-                className="inline-flex items-center text-xs"
-              >
-                <Info size={14} className="mr-1" />
-                Details
-              </Button>
-            )}
-            
-            {isInstalled && (
-              <Button
-                size="sm"
-                variant="ghost"
-                onClick={() => setShowDetails(!showDetails)}
-                className="text-xs"
-              >
-                {showDetails ? 'Less' : 'More'}
-              </Button>
-            )}
-          </div>
-        </div>
-
-        {showDetails && isInstalled && (
-          <div className="mt-4 pt-4 border-t border-gray-200">
-            <div className="space-y-2 text-sm">
-              <div>
-                <span className="font-medium text-gray-700">Package:</span>
-                <span className="ml-2 text-gray-600 font-mono text-xs">{integration.name}</span>
-              </div>
-              {integration.endpoints && (
-                <div>
-                  <span className="font-medium text-gray-700">Endpoints:</span>
-                  <span className="ml-2 text-gray-600">{integration.endpoints.length}</span>
-                </div>
-              )}
-              {integration.lastUpdated && (
-                <div>
-                  <span className="font-medium text-gray-700">Last Updated:</span>
-                  <span className="ml-2 text-gray-600">
-                    {new Date(integration.lastUpdated).toLocaleDateString()}
-                  </span>
-                </div>
-              )}
-              {integration.connections !== undefined && (
-                <div>
-                  <span className="font-medium text-gray-700">Active Connections:</span>
-                  <span className="ml-2 text-gray-600">{integration.connections}</span>
-                </div>
-              )}
-            </div>
-            
-            <div className="mt-3 flex justify-between">
-              {onTest && (
-                <Button
-                  size="sm"
-                  variant="outline"
-                  onClick={() => handleAction('test', onTest)}
-                  className="inline-flex items-center text-xs"
-                >
-                  <TestTube size={14} className="mr-1" />
-                  Test Integration
-                </Button>
-              )}
-              <Button
-                size="sm"
-                variant="destructive"
-                onClick={() => handleAction('uninstall', onUninstall)}
-                className="inline-flex items-center text-xs"
-              >
-                Uninstall
-              </Button>
-            </div>
-          </div>
-        )}
-      </CardContent>
-    </Card>
-  )
-}
-
-export default IntegrationCardEnhanced