@wakastellar/ui 2.1.2 → 2.3.2

package/src/blocks/cicd-builder/index.tsx

@@ -0,0 +1,738 @@
+"use client"
+
+import * as React from "react"
+import { cn } from "../../utils/cn"
+import { Badge } from "../../components/badge"
+import { Button } from "../../components/button"
+import { Card, CardContent, CardHeader, CardTitle } from "../../components/card"
+import { Input } from "../../components/input"
+import { ScrollArea } from "../../components/scroll-area"
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "../../components/select"
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "../../components/dropdown-menu"
+import {
+  GitBranch,
+  Play,
+  Pause,
+  Square,
+  Plus,
+  Trash2,
+  GripVertical,
+  Settings,
+  ChevronDown,
+  ChevronRight,
+  Box,
+  Terminal,
+  Upload,
+  Download,
+  Shield,
+  TestTube,
+  Rocket,
+  Container,
+  Database,
+  Bell,
+  CheckCircle2,
+  XCircle,
+  Clock,
+  MoreVertical,
+  Copy,
+  Eye,
+  ArrowRight,
+  Zap,
+} from "lucide-react"
+
+export type StepType = "build" | "test" | "deploy" | "script" | "docker" | "notify" | "approval" | "artifact" | "cache" | "parallel"
+export type StepStatus = "pending" | "running" | "success" | "failed" | "skipped" | "waiting"
+
+export interface PipelineStep {
+  id: string
+  name: string
+  type: StepType
+  status?: StepStatus
+  command?: string
+  image?: string
+  environment?: Record<string, string>
+  artifacts?: string[]
+  dependsOn?: string[]
+  timeout?: number
+  retries?: number
+  condition?: string
+  parallel?: PipelineStep[]
+}
+
+export interface PipelineStage {
+  id: string
+  name: string
+  steps: PipelineStep[]
+  status?: StepStatus
+  runParallel?: boolean
+}
+
+export interface Pipeline {
+  id: string
+  name: string
+  description?: string
+  trigger?: {
+    branches?: string[]
+    events?: ("push" | "pull_request" | "tag" | "schedule")[]
+    schedule?: string
+  }
+  stages: PipelineStage[]
+  variables?: Record<string, string>
+}
+
+export interface CICDBuilderProps {
+  pipeline: Pipeline
+  onPipelineChange?: (pipeline: Pipeline) => void
+  onRun?: () => void
+  onSave?: () => void
+  onExport?: (format: "yaml" | "json") => void
+  readOnly?: boolean
+  className?: string
+}
+
+const stepTypeConfig: Record<StepType, { icon: React.ElementType; color: string; label: string }> = {
+  build: { icon: Box, color: "text-blue-500", label: "Build" },
+  test: { icon: TestTube, color: "text-purple-500", label: "Test" },
+  deploy: { icon: Rocket, color: "text-green-500", label: "Deploy" },
+  script: { icon: Terminal, color: "text-gray-500", label: "Script" },
+  docker: { icon: Container, color: "text-cyan-500", label: "Docker" },
+  notify: { icon: Bell, color: "text-yellow-500", label: "Notify" },
+  approval: { icon: Shield, color: "text-orange-500", label: "Approval" },
+  artifact: { icon: Upload, color: "text-indigo-500", label: "Artifact" },
+  cache: { icon: Database, color: "text-pink-500", label: "Cache" },
+  parallel: { icon: Zap, color: "text-amber-500", label: "Parallel" },
+}
+
+const statusConfig: Record<StepStatus, { color: string; bgColor: string; icon: React.ElementType }> = {
+  pending: { color: "text-muted-foreground", bgColor: "bg-muted", icon: Clock },
+  running: { color: "text-blue-500", bgColor: "bg-blue-500", icon: Play },
+  success: { color: "text-green-500", bgColor: "bg-green-500", icon: CheckCircle2 },
+  failed: { color: "text-red-500", bgColor: "bg-red-500", icon: XCircle },
+  skipped: { color: "text-gray-400", bgColor: "bg-gray-400", icon: ChevronRight },
+  waiting: { color: "text-yellow-500", bgColor: "bg-yellow-500", icon: Clock },
+}
+
+function StepEditor({
+  step,
+  onUpdate,
+  onDelete,
+  readOnly,
+}: {
+  step: PipelineStep
+  onUpdate: (step: PipelineStep) => void
+  onDelete: () => void
+  readOnly?: boolean
+}) {
+  const [expanded, setExpanded] = React.useState(false)
+  const typeConf = stepTypeConfig[step.type]
+  const TypeIcon = typeConf.icon
+  const statusConf = step.status ? statusConfig[step.status] : null
+  const StatusIcon = statusConf?.icon
+
+  return (
+    <div className={cn(
+      "border rounded-lg transition-all",
+      step.status === "failed" && "border-red-500/50",
+      step.status === "running" && "border-blue-500/50 bg-blue-500/5"
+    )}>
+      <div
+        className="flex items-center gap-3 p-3 cursor-pointer"
+        onClick={() => setExpanded(!expanded)}
+      >
+        {!readOnly && (
+          <GripVertical className="h-4 w-4 text-muted-foreground cursor-grab" />
+        )}
+
+        <div className={cn("p-1.5 rounded", `${typeConf.color.replace("text-", "bg-")}/10`)}>
+          <TypeIcon className={cn("h-4 w-4", typeConf.color)} />
+        </div>
+
+        <div className="flex-1 min-w-0">
+          <div className="flex items-center gap-2">
+            <span className="font-medium">{step.name}</span>
+            <Badge variant="outline" className="text-xs">
+              {typeConf.label}
+            </Badge>
+          </div>
+          {step.command && (
+            <code className="text-xs text-muted-foreground font-mono truncate block mt-0.5">
+              {step.command}
+            </code>
+          )}
+        </div>
+
+        {StatusIcon && (
+          <Badge variant="outline" className={cn("text-xs", statusConf?.color)}>
+            <StatusIcon className="h-3 w-3 mr-1" />
+            {step.status}
+          </Badge>
+        )}
+
+        {!readOnly && (
+          <DropdownMenu>
+            <DropdownMenuTrigger asChild onClick={(e) => e.stopPropagation()}>
+              <Button variant="ghost" size="sm" className="h-8 w-8 p-0">
+                <MoreVertical className="h-4 w-4" />
+              </Button>
+            </DropdownMenuTrigger>
+            <DropdownMenuContent align="end">
+              <DropdownMenuItem onClick={() => setExpanded(true)}>
+                <Settings className="h-4 w-4 mr-2" />
+                Configure
+              </DropdownMenuItem>
+              <DropdownMenuItem>
+                <Copy className="h-4 w-4 mr-2" />
+                Duplicate
+              </DropdownMenuItem>
+              <DropdownMenuSeparator />
+              <DropdownMenuItem className="text-destructive" onClick={onDelete}>
+                <Trash2 className="h-4 w-4 mr-2" />
+                Delete
+              </DropdownMenuItem>
+            </DropdownMenuContent>
+          </DropdownMenu>
+        )}
+
+        <ChevronRight className={cn("h-4 w-4 transition-transform", expanded && "rotate-90")} />
+      </div>
+
+      {expanded && (
+        <div className="px-3 pb-3 pt-0 space-y-3 border-t mt-2">
+          <div className="grid grid-cols-2 gap-3">
+            <div>
+              <label className="text-xs text-muted-foreground">Step Name</label>
+              <Input
+                value={step.name}
+                onChange={(e) => onUpdate({ ...step, name: e.target.value })}
+                className="h-8 mt-1"
+                disabled={readOnly}
+              />
+            </div>
+            <div>
+              <label className="text-xs text-muted-foreground">Type</label>
+              <Select
+                value={step.type}
+                onValueChange={(v) => onUpdate({ ...step, type: v as StepType })}
+                disabled={readOnly}
+              >
+                <SelectTrigger className="h-8 mt-1">
+                  <SelectValue />
+                </SelectTrigger>
+                <SelectContent>
+                  {Object.entries(stepTypeConfig).map(([type, conf]) => (
+                    <SelectItem key={type} value={type}>
+                      <div className="flex items-center gap-2">
+                        <conf.icon className={cn("h-4 w-4", conf.color)} />
+                        {conf.label}
+                      </div>
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            </div>
+          </div>
+
+          {(step.type === "script" || step.type === "build" || step.type === "test") && (
+            <div>
+              <label className="text-xs text-muted-foreground">Command</label>
+              <Input
+                value={step.command || ""}
+                onChange={(e) => onUpdate({ ...step, command: e.target.value })}
+                placeholder="npm run build"
+                className="h-8 mt-1 font-mono text-sm"
+                disabled={readOnly}
+              />
+            </div>
+          )}
+
+          {step.type === "docker" && (
+            <div>
+              <label className="text-xs text-muted-foreground">Docker Image</label>
+              <Input
+                value={step.image || ""}
+                onChange={(e) => onUpdate({ ...step, image: e.target.value })}
+                placeholder="node:18-alpine"
+                className="h-8 mt-1 font-mono text-sm"
+                disabled={readOnly}
+              />
+            </div>
+          )}
+
+          <div className="grid grid-cols-2 gap-3">
+            <div>
+              <label className="text-xs text-muted-foreground">Timeout (seconds)</label>
+              <Input
+                type="number"
+                value={step.timeout || ""}
+                onChange={(e) => onUpdate({ ...step, timeout: parseInt(e.target.value) || undefined })}
+                placeholder="300"
+                className="h-8 mt-1"
+                disabled={readOnly}
+              />
+            </div>
+            <div>
+              <label className="text-xs text-muted-foreground">Retries</label>
+              <Input
+                type="number"
+                value={step.retries || ""}
+                onChange={(e) => onUpdate({ ...step, retries: parseInt(e.target.value) || undefined })}
+                placeholder="0"
+                className="h-8 mt-1"
+                disabled={readOnly}
+              />
+            </div>
+          </div>
+
+          {step.condition !== undefined && (
+            <div>
+              <label className="text-xs text-muted-foreground">Condition</label>
+              <Input
+                value={step.condition}
+                onChange={(e) => onUpdate({ ...step, condition: e.target.value })}
+                placeholder="$CI_COMMIT_BRANCH == 'main'"
+                className="h-8 mt-1 font-mono text-sm"
+                disabled={readOnly}
+              />
+            </div>
+          )}
+        </div>
+      )}
+    </div>
+  )
+}
+
+function StageEditor({
+  stage,
+  onUpdate,
+  onDelete,
+  onAddStep,
+  readOnly,
+}: {
+  stage: PipelineStage
+  onUpdate: (stage: PipelineStage) => void
+  onDelete: () => void
+  onAddStep: (type: StepType) => void
+  readOnly?: boolean
+}) {
+  const [collapsed, setCollapsed] = React.useState(false)
+  const statusConf = stage.status ? statusConfig[stage.status] : null
+  const StatusIcon = statusConf?.icon
+
+  const updateStep = (stepId: string, updatedStep: PipelineStep) => {
+    onUpdate({
+      ...stage,
+      steps: stage.steps.map((s) => (s.id === stepId ? updatedStep : s)),
+    })
+  }
+
+  const deleteStep = (stepId: string) => {
+    onUpdate({
+      ...stage,
+      steps: stage.steps.filter((s) => s.id !== stepId),
+    })
+  }
+
+  return (
+    <Card className={cn(
+      stage.status === "failed" && "border-red-500/30",
+      stage.status === "running" && "border-blue-500/30"
+    )}>
+      <CardHeader className="pb-2">
+        <div className="flex items-center gap-3">
+          <button onClick={() => setCollapsed(!collapsed)}>
+            <ChevronDown className={cn("h-4 w-4 transition-transform", collapsed && "-rotate-90")} />
+          </button>
+
+          <Input
+            value={stage.name}
+            onChange={(e) => onUpdate({ ...stage, name: e.target.value })}
+            className="h-8 font-semibold border-0 p-0 focus-visible:ring-0 bg-transparent"
+            disabled={readOnly}
+          />
+
+          {StatusIcon && (
+            <Badge variant="outline" className={cn("text-xs ml-auto", statusConf?.color)}>
+              <StatusIcon className="h-3 w-3 mr-1" />
+              {stage.status}
+            </Badge>
+          )}
+
+          <Badge variant="secondary" className="text-xs">
+            {stage.steps.length} steps
+          </Badge>
+
+          {!readOnly && (
+            <DropdownMenu>
+              <DropdownMenuTrigger asChild>
+                <Button variant="ghost" size="sm" className="h-8 w-8 p-0">
+                  <MoreVertical className="h-4 w-4" />
+                </Button>
+              </DropdownMenuTrigger>
+              <DropdownMenuContent align="end">
+                <DropdownMenuItem>
+                  <Copy className="h-4 w-4 mr-2" />
+                  Duplicate Stage
+                </DropdownMenuItem>
+                <DropdownMenuSeparator />
+                <DropdownMenuItem className="text-destructive" onClick={onDelete}>
+                  <Trash2 className="h-4 w-4 mr-2" />
+                  Delete Stage
+                </DropdownMenuItem>
+              </DropdownMenuContent>
+            </DropdownMenu>
+          )}
+        </div>
+      </CardHeader>
+
+      {!collapsed && (
+        <CardContent className="space-y-2">
+          {stage.steps.map((step) => (
+            <StepEditor
+              key={step.id}
+              step={step}
+              onUpdate={(s) => updateStep(step.id, s)}
+              onDelete={() => deleteStep(step.id)}
+              readOnly={readOnly}
+            />
+          ))}
+
+          {!readOnly && (
+            <DropdownMenu>
+              <DropdownMenuTrigger asChild>
+                <Button variant="outline" size="sm" className="w-full">
+                  <Plus className="h-4 w-4 mr-1" />
+                  Add Step
+                </Button>
+              </DropdownMenuTrigger>
+              <DropdownMenuContent className="w-48">
+                {Object.entries(stepTypeConfig).map(([type, conf]) => (
+                  <DropdownMenuItem key={type} onClick={() => onAddStep(type as StepType)}>
+                    <conf.icon className={cn("h-4 w-4 mr-2", conf.color)} />
+                    {conf.label}
+                  </DropdownMenuItem>
+                ))}
+              </DropdownMenuContent>
+            </DropdownMenu>
+          )}
+        </CardContent>
+      )}
+    </Card>
+  )
+}
+
+export function CICDBuilder({
+  pipeline: initialPipeline,
+  onPipelineChange,
+  onRun,
+  onSave,
+  onExport,
+  readOnly = false,
+  className,
+}: CICDBuilderProps) {
+  const [pipeline, setPipeline] = React.useState(initialPipeline)
+
+  const updatePipeline = (updates: Partial<Pipeline>) => {
+    const updated = { ...pipeline, ...updates }
+    setPipeline(updated)
+    onPipelineChange?.(updated)
+  }
+
+  const addStage = () => {
+    const newStage: PipelineStage = {
+      id: `stage-${Date.now()}`,
+      name: `Stage ${pipeline.stages.length + 1}`,
+      steps: [],
+    }
+    updatePipeline({ stages: [...pipeline.stages, newStage] })
+  }
+
+  const updateStage = (stageId: string, updatedStage: PipelineStage) => {
+    updatePipeline({
+      stages: pipeline.stages.map((s) => (s.id === stageId ? updatedStage : s)),
+    })
+  }
+
+  const deleteStage = (stageId: string) => {
+    updatePipeline({
+      stages: pipeline.stages.filter((s) => s.id !== stageId),
+    })
+  }
+
+  const addStep = (stageId: string, type: StepType) => {
+    const stage = pipeline.stages.find((s) => s.id === stageId)
+    if (!stage) return
+
+    const newStep: PipelineStep = {
+      id: `step-${Date.now()}`,
+      name: `${stepTypeConfig[type].label} Step`,
+      type,
+    }
+
+    updateStage(stageId, {
+      ...stage,
+      steps: [...stage.steps, newStep],
+    })
+  }
+
+  return (
+    <div className={cn("flex flex-col gap-6", className)}>
+      {/* Header */}
+      <Card>
+        <CardHeader className="pb-3">
+          <div className="flex items-center justify-between">
+            <div className="flex items-center gap-3">
+              <GitBranch className="h-5 w-5" />
+              <div>
+                <Input
+                  value={pipeline.name}
+                  onChange={(e) => updatePipeline({ name: e.target.value })}
+                  className="h-8 text-lg font-bold border-0 p-0 focus-visible:ring-0 bg-transparent"
+                  disabled={readOnly}
+                />
+                {pipeline.description && (
+                  <p className="text-sm text-muted-foreground">{pipeline.description}</p>
+                )}
+              </div>
+            </div>
+
+            <div className="flex items-center gap-2">
+              {onExport && (
+                <DropdownMenu>
+                  <DropdownMenuTrigger asChild>
+                    <Button variant="outline" size="sm">
+                      <Download className="h-4 w-4 mr-1" />
+                      Export
+                    </Button>
+                  </DropdownMenuTrigger>
+                  <DropdownMenuContent>
+                    <DropdownMenuItem onClick={() => onExport("yaml")}>
+                      Export as YAML
+                    </DropdownMenuItem>
+                    <DropdownMenuItem onClick={() => onExport("json")}>
+                      Export as JSON
+                    </DropdownMenuItem>
+                  </DropdownMenuContent>
+                </DropdownMenu>
+              )}
+              {onSave && !readOnly && (
+                <Button variant="outline" size="sm" onClick={onSave}>
+                  Save
+                </Button>
+              )}
+              {onRun && (
+                <Button size="sm" onClick={onRun}>
+                  <Play className="h-4 w-4 mr-1" />
+                  Run Pipeline
+                </Button>
+              )}
+            </div>
+          </div>
+        </CardHeader>
+
+        {/* Triggers */}
+        {pipeline.trigger && (
+          <CardContent className="pt-0">
+            <div className="flex items-center gap-2 flex-wrap">
+              <span className="text-sm text-muted-foreground">Triggers:</span>
+              {pipeline.trigger.events?.map((event) => (
+                <Badge key={event} variant="outline" className="text-xs">
+                  {event}
+                </Badge>
+              ))}
+              {pipeline.trigger.branches?.map((branch) => (
+                <Badge key={branch} variant="secondary" className="text-xs">
+                  <GitBranch className="h-3 w-3 mr-1" />
+                  {branch}
+                </Badge>
+              ))}
+              {pipeline.trigger.schedule && (
+                <Badge variant="outline" className="text-xs">
+                  <Clock className="h-3 w-3 mr-1" />
+                  {pipeline.trigger.schedule}
+                </Badge>
+              )}
+            </div>
+          </CardContent>
+        )}
+      </Card>
+
+      {/* Pipeline visualization */}
+      <div className="flex items-center gap-2 overflow-x-auto pb-2">
+        {pipeline.stages.map((stage, index) => (
+          <React.Fragment key={stage.id}>
+            <div className="flex flex-col items-center gap-1">
+              <div className={cn(
+                "w-4 h-4 rounded-full border-2",
+                stage.status === "success" && "bg-green-500 border-green-500",
+                stage.status === "failed" && "bg-red-500 border-red-500",
+                stage.status === "running" && "bg-blue-500 border-blue-500 animate-pulse",
+                !stage.status && "bg-muted border-muted-foreground"
+              )} />
+              <span className="text-xs text-muted-foreground whitespace-nowrap">{stage.name}</span>
+            </div>
+            {index < pipeline.stages.length - 1 && (
+              <ArrowRight className="h-4 w-4 text-muted-foreground shrink-0" />
+            )}
+          </React.Fragment>
+        ))}
+      </div>
+
+      {/* Stages */}
+      <ScrollArea className="h-[500px]">
+        <div className="space-y-4 pr-4">
+          {pipeline.stages.map((stage) => (
+            <StageEditor
+              key={stage.id}
+              stage={stage}
+              onUpdate={(s) => updateStage(stage.id, s)}
+              onDelete={() => deleteStage(stage.id)}
+              onAddStep={(type) => addStep(stage.id, type)}
+              readOnly={readOnly}
+            />
+          ))}
+
+          {!readOnly && (
+            <Button variant="outline" className="w-full" onClick={addStage}>
+              <Plus className="h-4 w-4 mr-1" />
+              Add Stage
+            </Button>
+          )}
+        </div>
+      </ScrollArea>
+    </div>
+  )
+}
+
+// Default sample pipeline
+export const defaultPipeline: Pipeline = {
+  id: "1",
+  name: "Production Deploy",
+  description: "Build, test, and deploy to production",
+  trigger: {
+    branches: ["main", "release/*"],
+    events: ["push", "pull_request"],
+  },
+  stages: [
+    {
+      id: "build",
+      name: "Build",
+      status: "success",
+      steps: [
+        {
+          id: "install",
+          name: "Install Dependencies",
+          type: "script",
+          command: "npm ci",
+          status: "success",
+        },
+        {
+          id: "build",
+          name: "Build Application",
+          type: "build",
+          command: "npm run build",
+          status: "success",
+        },
+        {
+          id: "artifact",
+          name: "Upload Build Artifacts",
+          type: "artifact",
+          artifacts: ["dist/**", "build/**"],
+          status: "success",
+        },
+      ],
+    },
+    {
+      id: "test",
+      name: "Test",
+      status: "running",
+      steps: [
+        {
+          id: "unit",
+          name: "Unit Tests",
+          type: "test",
+          command: "npm run test:unit",
+          status: "success",
+        },
+        {
+          id: "integration",
+          name: "Integration Tests",
+          type: "test",
+          command: "npm run test:integration",
+          status: "running",
+        },
+        {
+          id: "e2e",
+          name: "E2E Tests",
+          type: "test",
+          command: "npm run test:e2e",
+          status: "pending",
+        },
+      ],
+    },
+    {
+      id: "security",
+      name: "Security",
+      status: "pending",
+      steps: [
+        {
+          id: "sast",
+          name: "SAST Scan",
+          type: "script",
+          command: "npm run security:sast",
+        },
+        {
+          id: "deps",
+          name: "Dependency Check",
+          type: "script",
+          command: "npm audit",
+        },
+      ],
+    },
+    {
+      id: "deploy",
+      name: "Deploy",
+      status: "pending",
+      steps: [
+        {
+          id: "approval",
+          name: "Production Approval",
+          type: "approval",
+          condition: "$CI_COMMIT_BRANCH == 'main'",
+        },
+        {
+          id: "docker",
+          name: "Build Docker Image",
+          type: "docker",
+          image: "app:$CI_COMMIT_SHA",
+        },
+        {
+          id: "deploy-prod",
+          name: "Deploy to Production",
+          type: "deploy",
+          command: "kubectl apply -f k8s/",
+        },
+        {
+          id: "notify",
+          name: "Notify Team",
+          type: "notify",
+        },
+      ],
+    },
+  ],
+  variables: {
+    NODE_ENV: "production",
+    REGISTRY: "gcr.io/my-project",
+  },
+}