@camstack/addon-admin-ui 0.1.1 → 0.1.3

package/src/components/addons/AddonUploadZone.tsx

@@ -1,307 +0,0 @@
-import { useState, useRef, useCallback } from 'react'
-import { Upload, FileArchive, X, Loader2, CheckCircle, AlertCircle } from 'lucide-react'
-
-// ---------------------------------------------------------------------------
-// Types
-// ---------------------------------------------------------------------------
-
-type UploadStatus = 'idle' | 'dragging' | 'uploading' | 'success' | 'error'
-
-interface UploadResult {
-  success: boolean
-  packageName?: string
-  version?: string
-  error?: string
-}
-
-interface AddonUploadZoneProps {
-  onUploadSuccess: () => void
-}
-
-// ---------------------------------------------------------------------------
-// Accepted file extensions
-// ---------------------------------------------------------------------------
-
-const ACCEPTED_EXTENSIONS = ['.tgz', '.tar.gz', '.zip']
-const ACCEPT_MIME = '.tgz,.tar.gz,.zip'
-
-function isAcceptedFile(file: File): boolean {
-  const name = file.name.toLowerCase()
-  return ACCEPTED_EXTENSIONS.some((ext) => name.endsWith(ext))
-}
-
-// ---------------------------------------------------------------------------
-// AddonUploadZone
-// ---------------------------------------------------------------------------
-
-export function AddonUploadZone({ onUploadSuccess }: AddonUploadZoneProps) {
-  const [status, setStatus] = useState<UploadStatus>('idle')
-  const [progress, setProgress] = useState(0)
-  const [selectedFile, setSelectedFile] = useState<File | null>(null)
-  const [result, setResult] = useState<UploadResult | null>(null)
-  const fileInputRef = useRef<HTMLInputElement>(null)
-
-  const resetState = useCallback(() => {
-    setStatus('idle')
-    setProgress(0)
-    setSelectedFile(null)
-    setResult(null)
-  }, [])
-
-  const uploadFile = useCallback(
-    async (file: File) => {
-      if (!isAcceptedFile(file)) {
-        setStatus('error')
-        setResult({ success: false, error: `Invalid file type. Accepted: ${ACCEPTED_EXTENSIONS.join(', ')}` })
-        return
-      }
-
-      setSelectedFile(file)
-      setStatus('uploading')
-      setProgress(0)
-      setResult(null)
-
-      const formData = new FormData()
-      formData.append('file', file)
-
-      const token = localStorage.getItem('camstack_admin_token') ?? ''
-
-      try {
-        const xhr = new XMLHttpRequest()
-
-        const uploadResult = await new Promise<UploadResult>((resolve, reject) => {
-          xhr.upload.addEventListener('progress', (event) => {
-            if (event.lengthComputable) {
-              const pct = Math.round((event.loaded / event.total) * 100)
-              setProgress(pct)
-            }
-          })
-
-          xhr.addEventListener('load', () => {
-            try {
-              const body = JSON.parse(xhr.responseText)
-              if (xhr.status >= 200 && xhr.status < 300 && body.success) {
-                resolve({
-                  success: true,
-                  packageName: body.packageName,
-                  version: body.version,
-                })
-              } else {
-                resolve({
-                  success: false,
-                  error: body.error ?? `Upload failed (HTTP ${xhr.status})`,
-                })
-              }
-            } catch {
-              resolve({ success: false, error: `Unexpected response (HTTP ${xhr.status})` })
-            }
-          })
-
-          xhr.addEventListener('error', () => {
-            reject(new Error('Network error'))
-          })
-
-          xhr.addEventListener('abort', () => {
-            reject(new Error('Upload aborted'))
-          })
-
-          xhr.open('POST', '/api/addons/upload')
-          xhr.setRequestHeader('Authorization', `Bearer ${token}`)
-          xhr.send(formData)
-        })
-
-        setResult(uploadResult)
-        setStatus(uploadResult.success ? 'success' : 'error')
-
-        if (uploadResult.success) {
-          onUploadSuccess()
-        }
-      } catch (err) {
-        const message = err instanceof Error ? err.message : 'Upload failed'
-        setResult({ success: false, error: message })
-        setStatus('error')
-      }
-    },
-    [onUploadSuccess],
-  )
-
-  // --- Drag event handlers ---
-
-  const handleDragEnter = useCallback((e: React.DragEvent) => {
-    e.preventDefault()
-    e.stopPropagation()
-    setStatus((prev) => (prev === 'uploading' ? prev : 'dragging'))
-  }, [])
-
-  const handleDragLeave = useCallback((e: React.DragEvent) => {
-    e.preventDefault()
-    e.stopPropagation()
-    // Only leave when exiting the drop zone itself
-    if (e.currentTarget.contains(e.relatedTarget as Node)) return
-    setStatus((prev) => (prev === 'uploading' ? prev : 'idle'))
-  }, [])
-
-  const handleDragOver = useCallback((e: React.DragEvent) => {
-    e.preventDefault()
-    e.stopPropagation()
-  }, [])
-
-  const handleDrop = useCallback(
-    (e: React.DragEvent) => {
-      e.preventDefault()
-      e.stopPropagation()
-      setStatus('idle')
-
-      const file = e.dataTransfer.files[0]
-      if (file) {
-        uploadFile(file)
-      }
-    },
-    [uploadFile],
-  )
-
-  const handleFileSelect = useCallback(
-    (e: React.ChangeEvent<HTMLInputElement>) => {
-      const file = e.target.files?.[0]
-      if (file) {
-        uploadFile(file)
-      }
-      // Reset input so the same file can be re-selected
-      e.target.value = ''
-    },
-    [uploadFile],
-  )
-
-  const handleBrowseClick = useCallback(() => {
-    fileInputRef.current?.click()
-  }, [])
-
-  // --- Render helpers ---
-
-  const isIdle = status === 'idle' || status === 'dragging'
-  const isDragging = status === 'dragging'
-
-  return (
-    <div className="space-y-2">
-      {/* Hidden file input */}
-      <input
-        ref={fileInputRef}
-        type="file"
-        accept={ACCEPT_MIME}
-        onChange={handleFileSelect}
-        className="hidden"
-      />
-
-      {/* Drop zone */}
-      <div
-        onDragEnter={handleDragEnter}
-        onDragLeave={handleDragLeave}
-        onDragOver={handleDragOver}
-        onDrop={handleDrop}
-        onClick={isIdle ? handleBrowseClick : undefined}
-        className={[
-          'relative rounded-lg border-2 border-dashed transition-all cursor-pointer',
-          'flex flex-col items-center justify-center gap-2 px-6 py-6',
-          isDragging
-            ? 'border-primary bg-primary/5 scale-[1.01]'
-            : status === 'uploading'
-              ? 'border-border bg-surface cursor-default'
-              : status === 'success'
-                ? 'border-green-500/40 bg-green-500/5 cursor-default'
-                : status === 'error'
-                  ? 'border-red-500/40 bg-red-500/5 cursor-default'
-                  : 'border-border bg-surface hover:border-primary/50 hover:bg-surface-hover/50',
-        ].join(' ')}
-      >
-        {/* Idle / dragging state */}
-        {isIdle && (
-          <>
-            <Upload className={`h-6 w-6 ${isDragging ? 'text-primary' : 'text-foreground-subtle'}`} />
-            <div className="text-center">
-              <p className="text-xs font-medium text-foreground">
-                {isDragging ? 'Drop addon file here' : 'Drag & drop addon file'}
-              </p>
-              <p className="text-[10px] text-foreground-subtle mt-0.5">
-                or{' '}
-                <span className="text-primary underline underline-offset-2">browse files</span>
-                {' '}&middot; .tgz, .tar.gz, .zip
-              </p>
-            </div>
-          </>
-        )}
-
-        {/* Uploading state */}
-        {status === 'uploading' && selectedFile && (
-          <>
-            <div className="flex items-center gap-2">
-              <FileArchive className="h-5 w-5 text-primary shrink-0" />
-              <div className="min-w-0">
-                <p className="text-xs font-medium text-foreground truncate">{selectedFile.name}</p>
-                <p className="text-[10px] text-foreground-subtle">
-                  {(selectedFile.size / 1024).toFixed(1)} KB
-                </p>
-              </div>
-            </div>
-
-            {/* Progress bar */}
-            <div className="w-full max-w-xs">
-              <div className="h-1.5 w-full rounded-full bg-border overflow-hidden">
-                <div
-                  className="h-full rounded-full bg-primary transition-all duration-300 ease-out"
-                  style={{ width: `${progress}%` }}
-                />
-              </div>
-              <div className="flex items-center justify-between mt-1">
-                <span className="text-[10px] text-foreground-subtle flex items-center gap-1">
-                  <Loader2 className="h-3 w-3 animate-spin" />
-                  Uploading...
-                </span>
-                <span className="text-[10px] text-foreground-subtle font-mono">{progress}%</span>
-              </div>
-            </div>
-          </>
-        )}
-
-        {/* Success state */}
-        {status === 'success' && result && (
-          <>
-            <CheckCircle className="h-6 w-6 text-green-500" />
-            <div className="text-center">
-              <p className="text-xs font-medium text-foreground">Addon installed</p>
-              <p className="text-[10px] text-foreground-subtle mt-0.5">
-                {result.packageName} v{result.version}
-              </p>
-            </div>
-            <button
-              type="button"
-              onClick={(e) => { e.stopPropagation(); resetState() }}
-              className="absolute top-2 right-2 p-1 rounded-md text-foreground-subtle hover:text-foreground hover:bg-surface-hover transition-colors"
-              title="Dismiss"
-            >
-              <X className="h-3.5 w-3.5" />
-            </button>
-          </>
-        )}
-
-        {/* Error state */}
-        {status === 'error' && result && (
-          <>
-            <AlertCircle className="h-6 w-6 text-red-400" />
-            <div className="text-center">
-              <p className="text-xs font-medium text-red-400">Upload failed</p>
-              <p className="text-[10px] text-foreground-subtle mt-0.5">{result.error}</p>
-            </div>
-            <button
-              type="button"
-              onClick={(e) => { e.stopPropagation(); resetState() }}
-              className="absolute top-2 right-2 p-1 rounded-md text-foreground-subtle hover:text-foreground hover:bg-surface-hover transition-colors"
-              title="Dismiss"
-            >
-              <X className="h-3.5 w-3.5" />
-            </button>
-          </>
-        )}
-      </div>
-    </div>
-  )
-}

package/src/components/addons/CapabilityBadge.tsx

@@ -1,55 +0,0 @@
-const CAPABILITY_COLORS: Record<string, string> = {
-  // detection / vision
-  detection:    'bg-green-500/10 text-green-400',
-  detector:     'bg-green-500/10 text-green-400',
-  // streaming
-  streaming:    'bg-blue-500/10 text-blue-400',
-  decode:       'bg-blue-500/10 text-blue-400',
-  decoder:      'bg-blue-500/10 text-blue-400',
-  // recording
-  recording:    'bg-orange-500/10 text-orange-400',
-  recorder:     'bg-orange-500/10 text-orange-400',
-  // transcoding
-  transcoding:  'bg-purple-500/10 text-purple-400',
-  transcoder:   'bg-purple-500/10 text-purple-400',
-  transcode:    'bg-purple-500/10 text-purple-400',
-  // restream
-  restream:     'bg-cyan-500/10 text-cyan-400',
-  restreamer:   'bg-cyan-500/10 text-cyan-400',
-  // storage
-  storage:      'bg-yellow-500/10 text-yellow-400',
-  // notification
-  notification: 'bg-pink-500/10 text-pink-400',
-  notifier:     'bg-pink-500/10 text-pink-400',
-  // faces
-  faces:        'bg-indigo-500/10 text-indigo-400',
-  // default
-}
-
-interface CapabilityBadgeProps {
-  /** Capability name (string) or declaration object ({ name, mode }) */
-  capability: string | { name: string; mode?: string }
-  /** Optional mode label shown after a separator (overrides object mode) */
-  mode?: string
-  size?: 'sm' | 'xs'
-}
-
-export function CapabilityBadge({ capability, mode, size = 'xs' }: CapabilityBadgeProps) {
-  const capName = typeof capability === 'string' ? capability : capability.name
-  const capMode = mode ?? (typeof capability === 'object' ? capability.mode : undefined)
-  const lower = capName.toLowerCase()
-  const color = CAPABILITY_COLORS[lower] ?? 'bg-primary/10 text-primary'
-  const textSize = size === 'sm' ? 'text-xs' : 'text-[10px]'
-
-  return (
-    <span className={`inline-flex items-center rounded-md px-1.5 py-0.5 font-medium gap-1 ${textSize} ${color}`}>
-      {capName}
-      {capMode && (
-        <>
-          <span className="opacity-40">·</span>
-          <span className="opacity-70">{capMode}</span>
-        </>
-      )}
-    </span>
-  )
-}

package/src/components/addons/CapabilityMap.tsx

@@ -1,133 +0,0 @@
-import { CheckCircle } from 'lucide-react'
-
-// ---------------------------------------------------------------------------
-// Types
-// ---------------------------------------------------------------------------
-
-export type CapabilityMode = 'singleton' | 'collection'
-
-export interface CapabilityProvider {
-  addonId: string
-  addonName: string
-  active: boolean
-}
-
-export interface CapabilityEntry {
-  name: string
-  mode: CapabilityMode
-  providers: CapabilityProvider[]
-}
-
-// ---------------------------------------------------------------------------
-// Color helpers
-// ---------------------------------------------------------------------------
-
-const CAPABILITY_BORDER_COLORS: Record<string, string> = {
-  detection:    'border-green-500',
-  detector:     'border-green-500',
-  streaming:    'border-blue-500',
-  decode:       'border-blue-500',
-  decoder:      'border-blue-500',
-  recording:    'border-orange-500',
-  recorder:     'border-orange-500',
-  transcoding:  'border-purple-500',
-  transcoder:   'border-purple-500',
-  restream:     'border-cyan-500',
-  restreamer:   'border-cyan-500',
-  storage:      'border-yellow-500',
-  notification: 'border-pink-500',
-  notifier:     'border-pink-500',
-  faces:        'border-indigo-500',
-}
-
-const CAPABILITY_BG_COLORS: Record<string, string> = {
-  detection:    'bg-green-500/5',
-  detector:     'bg-green-500/5',
-  streaming:    'bg-blue-500/5',
-  decode:       'bg-blue-500/5',
-  decoder:      'bg-blue-500/5',
-  recording:    'bg-orange-500/5',
-  recorder:     'bg-orange-500/5',
-  transcoding:  'bg-purple-500/5',
-  transcoder:   'bg-purple-500/5',
-  restream:     'bg-cyan-500/5',
-  restreamer:   'bg-cyan-500/5',
-  storage:      'bg-yellow-500/5',
-  notification: 'bg-pink-500/5',
-  notifier:     'bg-pink-500/5',
-  faces:        'bg-indigo-500/5',
-}
-
-// ---------------------------------------------------------------------------
-// CapabilityCard
-// ---------------------------------------------------------------------------
-
-function CapabilityCard({ entry }: { entry: CapabilityEntry }) {
-  const lower = entry.name.toLowerCase()
-  const borderColor = CAPABILITY_BORDER_COLORS[lower] ?? 'border-primary'
-  const bgColor = CAPABILITY_BG_COLORS[lower] ?? 'bg-primary/5'
-  const activeProvider = entry.providers.find((p) => p.active)
-
-  return (
-    <div className={`rounded-lg border-t-2 border border-border ${borderColor} ${bgColor} p-3 space-y-2`}>
-      <div className="flex items-center justify-between gap-2">
-        <span className="text-xs font-semibold text-foreground capitalize">{entry.name}</span>
-        <span className={`rounded-full px-2 py-0.5 text-[10px] font-medium ${entry.mode === 'singleton' ? 'bg-primary/10 text-primary' : 'bg-info/10 text-info'}`}>
-          {entry.mode}
-        </span>
-      </div>
-
-      {entry.mode === 'singleton' ? (
-        <div>
-          {activeProvider ? (
-            <div className="flex items-center gap-1.5 text-[10px] text-foreground">
-              <CheckCircle className="h-3 w-3 text-green-400 shrink-0" />
-              <span className="font-medium">{activeProvider.addonName}</span>
-              <span className="rounded-full bg-green-500/10 text-green-400 px-1.5 py-0.5 font-medium ml-auto">ACTIVE</span>
-            </div>
-          ) : (
-            <div className="text-[10px] text-foreground-subtle italic">No active provider</div>
-          )}
-        </div>
-      ) : (
-        <div className="space-y-1">
-          {entry.providers.length === 0 && (
-            <div className="text-[10px] text-foreground-subtle italic">No providers</div>
-          )}
-          {entry.providers.map((p) => (
-            <div key={p.addonId} className="flex items-center justify-between gap-2 text-[10px]">
-              <span className="text-foreground-subtle">{p.addonName}</span>
-              {p.active && (
-                <span className="rounded-full bg-green-500/10 text-green-400 px-1.5 py-0.5 font-medium">ACTIVE</span>
-              )}
-            </div>
-          ))}
-        </div>
-      )}
-    </div>
-  )
-}
-
-// ---------------------------------------------------------------------------
-// CapabilityMap
-// ---------------------------------------------------------------------------
-
-interface CapabilityMapProps {
-  capabilities: CapabilityEntry[]
-}
-
-export function CapabilityMap({ capabilities }: CapabilityMapProps) {
-  if (capabilities.length === 0) {
-    return (
-      <div className="text-xs text-foreground-subtle text-center py-8">No capabilities registered</div>
-    )
-  }
-
-  return (
-    <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-3">
-      {capabilities.map((cap) => (
-        <CapabilityCard key={cap.name} entry={cap} />
-      ))}
-    </div>
-  )
-}

package/src/components/addons/UpdatesList.tsx

@@ -1,119 +0,0 @@
-import { ArrowRight, RotateCcw, Zap } from 'lucide-react'
-
-// ---------------------------------------------------------------------------
-// Types
-// ---------------------------------------------------------------------------
-
-export interface UpdateEntry {
-  id: string
-  name: string
-  currentVersion: string
-  newVersion: string
-  changelog?: string
-  requiresRestart: boolean
-}
-
-// ---------------------------------------------------------------------------
-// UpdatesList
-// ---------------------------------------------------------------------------
-
-interface UpdatesListProps {
-  updates: UpdateEntry[]
-  onUpdate: (id: string) => void
-  onUpdateAll: () => void
-  onCheckUpdates: () => void
-  isChecking: boolean
-}
-
-export function UpdatesList({ updates, onUpdate, onUpdateAll, onCheckUpdates, isChecking }: UpdatesListProps) {
-  return (
-    <div className="space-y-4">
-      {/* Toolbar */}
-      <div className="flex items-center justify-between gap-3">
-        <button
-          type="button"
-          onClick={onCheckUpdates}
-          disabled={isChecking}
-          className="flex items-center gap-1.5 rounded-md border border-border bg-background px-3 py-1.5 text-xs text-foreground hover:bg-surface transition-colors disabled:opacity-50"
-        >
-          <RotateCcw className={`h-3.5 w-3.5 ${isChecking ? 'animate-spin' : ''}`} />
-          {isChecking ? 'Checking…' : 'Check for updates'}
-        </button>
-
-        {updates.length > 0 && (
-          <button
-            type="button"
-            onClick={onUpdateAll}
-            className="flex items-center gap-1.5 rounded-md bg-primary px-3 py-1.5 text-xs text-primary-foreground hover:bg-primary/90 transition-colors"
-          >
-            Update all ({updates.length})
-          </button>
-        )}
-      </div>
-
-      {updates.length === 0 && !isChecking && (
-        <div className="rounded-lg border border-border bg-surface py-10 text-center text-xs text-foreground-subtle">
-          All packages are up to date
-        </div>
-      )}
-
-      {updates.length > 0 && (
-        <div className="space-y-2">
-          {updates.map((update) => (
-            <div
-              key={update.id}
-              className="rounded-lg border border-border bg-surface px-4 py-3 flex items-start justify-between gap-4"
-            >
-              <div className="flex items-start gap-3 min-w-0">
-                {/* Icon letter */}
-                <div className="flex-shrink-0 h-8 w-8 rounded-lg bg-primary/10 flex items-center justify-center">
-                  <span className="text-xs font-bold text-primary uppercase">
-                    {update.name.charAt(0)}
-                  </span>
-                </div>
-
-                <div className="min-w-0">
-                  <div className="flex items-center gap-2 flex-wrap">
-                    <span className="text-sm font-semibold text-foreground">{update.name}</span>
-                    {update.requiresRestart ? (
-                      <span className="inline-flex items-center gap-1 rounded-full bg-warning/10 text-warning px-2 py-0.5 text-[10px] font-medium">
-                        <RotateCcw className="h-2.5 w-2.5" />
-                        Restart
-                      </span>
-                    ) : (
-                      <span className="inline-flex items-center gap-1 rounded-full bg-green-500/10 text-green-400 px-2 py-0.5 text-[10px] font-medium">
-                        <Zap className="h-2.5 w-2.5" />
-                        Hot-swap
-                      </span>
-                    )}
-                  </div>
-
-                  {/* Version diff */}
-                  <div className="flex items-center gap-1.5 mt-1 text-[10px]">
-                    <span className="text-foreground-subtle font-mono">v{update.currentVersion}</span>
-                    <ArrowRight className="h-3 w-3 text-foreground-subtle" />
-                    <span className="text-green-400 font-mono font-medium">v{update.newVersion}</span>
-                  </div>
-
-                  {update.changelog && (
-                    <p className="mt-1.5 text-[10px] text-foreground-subtle leading-relaxed line-clamp-2">
-                      {update.changelog}
-                    </p>
-                  )}
-                </div>
-              </div>
-
-              <button
-                type="button"
-                onClick={() => onUpdate(update.id)}
-                className="flex-shrink-0 rounded-md bg-primary/10 text-primary hover:bg-primary/20 px-3 py-1.5 text-xs font-medium transition-colors"
-              >
-                Update
-              </button>
-            </div>
-          ))}
-        </div>
-      )}
-    </div>
-  )
-}