@wakastellar/ui 2.1.1 → 2.1.2

package/src/blocks/deployment-dashboard/index.tsx

@@ -0,0 +1,609 @@
+"use client"
+
+import * as React from "react"
+import { cn } from "../../utils"
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "../../components/card"
+import { Button } from "../../components/button"
+import { Badge } from "../../components/badge"
+import { Progress } from "../../components/progress"
+import { Avatar, AvatarFallback, AvatarImage } from "../../components/avatar"
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "../../components/tabs"
+import { Separator } from "../../components/separator"
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "../../components/select"
+import {
+  Rocket,
+  GitBranch,
+  GitCommit,
+  GitMerge,
+  Clock,
+  CheckCircle,
+  XCircle,
+  AlertCircle,
+  Loader2,
+  Play,
+  Pause,
+  RotateCcw,
+  ExternalLink,
+  Terminal,
+  Server,
+  Globe,
+  Shield,
+  Activity,
+  ChevronRight,
+  RefreshCw,
+  Settings,
+  MoreVertical,
+  Zap,
+  Cloud,
+  Database,
+} from "lucide-react"
+
+// ============================================
+// TYPES
+// ============================================
+
+export type DeploymentStatus = "pending" | "building" | "deploying" | "success" | "failed" | "cancelled" | "rollback"
+export type Environment = "development" | "staging" | "production"
+
+export interface Deployment {
+  id: string
+  status: DeploymentStatus
+  environment: Environment
+  branch: string
+  commit: string
+  commitMessage: string
+  author: {
+    name: string
+    avatar?: string
+  }
+  startedAt: Date | string
+  finishedAt?: Date | string
+  duration?: string
+  url?: string
+  logs?: string[]
+}
+
+export interface Pipeline {
+  id: string
+  name: string
+  status: DeploymentStatus
+  stages: PipelineStage[]
+  trigger: string
+  branch: string
+  startedAt: Date | string
+}
+
+export interface PipelineStage {
+  id: string
+  name: string
+  status: DeploymentStatus
+  duration?: string
+  logs?: string[]
+}
+
+export interface EnvironmentStatus {
+  name: Environment
+  status: "healthy" | "degraded" | "down"
+  url: string
+  lastDeployment?: Deployment
+  uptime?: string
+  responseTime?: string
+}
+
+export interface DeploymentDashboardProps {
+  /** Recent deployments */
+  deployments?: Deployment[]
+  /** Active pipelines */
+  pipelines?: Pipeline[]
+  /** Environment statuses */
+  environments?: EnvironmentStatus[]
+  /** Handler for deploying */
+  onDeploy?: (environment: Environment, branch: string) => void
+  /** Handler for rollback */
+  onRollback?: (deploymentId: string) => void
+  /** Handler for cancelling */
+  onCancel?: (deploymentId: string) => void
+  /** Handler for retrying */
+  onRetry?: (deploymentId: string) => void
+  /** Available branches */
+  branches?: string[]
+  /** Custom className */
+  className?: string
+}
+
+// ============================================
+// SUBCOMPONENTS
+// ============================================
+
+const statusConfig: Record<DeploymentStatus, { color: string; icon: React.ReactNode; label: string }> = {
+  pending: { color: "text-yellow-500 bg-yellow-500/10", icon: <Clock className="h-4 w-4" />, label: "Pending" },
+  building: { color: "text-blue-500 bg-blue-500/10", icon: <Loader2 className="h-4 w-4 animate-spin" />, label: "Building" },
+  deploying: { color: "text-purple-500 bg-purple-500/10", icon: <Rocket className="h-4 w-4 animate-pulse" />, label: "Deploying" },
+  success: { color: "text-green-500 bg-green-500/10", icon: <CheckCircle className="h-4 w-4" />, label: "Success" },
+  failed: { color: "text-red-500 bg-red-500/10", icon: <XCircle className="h-4 w-4" />, label: "Failed" },
+  cancelled: { color: "text-gray-500 bg-gray-500/10", icon: <XCircle className="h-4 w-4" />, label: "Cancelled" },
+  rollback: { color: "text-orange-500 bg-orange-500/10", icon: <RotateCcw className="h-4 w-4" />, label: "Rollback" },
+}
+
+const environmentConfig: Record<Environment, { color: string; icon: React.ReactNode }> = {
+  development: { color: "text-blue-500 border-blue-500/30 bg-blue-500/10", icon: <Terminal className="h-4 w-4" /> },
+  staging: { color: "text-yellow-500 border-yellow-500/30 bg-yellow-500/10", icon: <Server className="h-4 w-4" /> },
+  production: { color: "text-green-500 border-green-500/30 bg-green-500/10", icon: <Globe className="h-4 w-4" /> },
+}
+
+function StatusBadge({ status }: { status: DeploymentStatus }) {
+  const config = statusConfig[status]
+  return (
+    <Badge variant="outline" className={cn("gap-1", config.color)}>
+      {config.icon}
+      {config.label}
+    </Badge>
+  )
+}
+
+function EnvironmentBadge({ environment }: { environment: Environment }) {
+  const config = environmentConfig[environment]
+  return (
+    <Badge variant="outline" className={cn("gap-1 capitalize", config.color)}>
+      {config.icon}
+      {environment}
+    </Badge>
+  )
+}
+
+function DeploymentCard({
+  deployment,
+  onRollback,
+  onCancel,
+  onRetry,
+}: {
+  deployment: Deployment
+  onRollback?: () => void
+  onCancel?: () => void
+  onRetry?: () => void
+}) {
+  const isInProgress = deployment.status === "building" || deployment.status === "deploying"
+  const canRollback = deployment.status === "success" && deployment.environment === "production"
+  const canRetry = deployment.status === "failed"
+  const canCancel = isInProgress
+
+  return (
+    <div className="p-4 rounded-lg border bg-card hover:bg-muted/50 transition-colors">
+      <div className="flex items-start justify-between gap-4">
+        <div className="flex items-start gap-3">
+          <Avatar className="h-10 w-10">
+            <AvatarImage src={deployment.author.avatar} />
+            <AvatarFallback>{deployment.author.name.slice(0, 2).toUpperCase()}</AvatarFallback>
+          </Avatar>
+          <div>
+            <div className="flex items-center gap-2 flex-wrap">
+              <StatusBadge status={deployment.status} />
+              <EnvironmentBadge environment={deployment.environment} />
+            </div>
+            <p className="text-sm mt-1 line-clamp-1">{deployment.commitMessage}</p>
+            <div className="flex items-center gap-3 mt-2 text-xs text-muted-foreground">
+              <span className="flex items-center gap-1">
+                <GitBranch className="h-3 w-3" />
+                {deployment.branch}
+              </span>
+              <span className="flex items-center gap-1">
+                <GitCommit className="h-3 w-3" />
+                {deployment.commit.slice(0, 7)}
+              </span>
+              <span className="flex items-center gap-1">
+                <Clock className="h-3 w-3" />
+                {typeof deployment.startedAt === "string"
+                  ? deployment.startedAt
+                  : formatRelativeTime(deployment.startedAt)}
+              </span>
+              {deployment.duration && <span>{deployment.duration}</span>}
+            </div>
+          </div>
+        </div>
+
+        <div className="flex items-center gap-1">
+          {deployment.url && (
+            <Button variant="ghost" size="icon" asChild>
+              <a href={deployment.url} target="_blank" rel="noopener noreferrer">
+                <ExternalLink className="h-4 w-4" />
+              </a>
+            </Button>
+          )}
+          {canCancel && (
+            <Button variant="ghost" size="icon" onClick={onCancel}>
+              <Pause className="h-4 w-4" />
+            </Button>
+          )}
+          {canRetry && (
+            <Button variant="ghost" size="icon" onClick={onRetry}>
+              <RefreshCw className="h-4 w-4" />
+            </Button>
+          )}
+          {canRollback && (
+            <Button variant="ghost" size="icon" onClick={onRollback}>
+              <RotateCcw className="h-4 w-4" />
+            </Button>
+          )}
+        </div>
+      </div>
+    </div>
+  )
+}
+
+function PipelineCard({ pipeline }: { pipeline: Pipeline }) {
+  const completedStages = pipeline.stages.filter((s) => s.status === "success").length
+  const progress = (completedStages / pipeline.stages.length) * 100
+
+  return (
+    <Card>
+      <CardHeader className="pb-2">
+        <div className="flex items-center justify-between">
+          <div className="flex items-center gap-2">
+            <StatusBadge status={pipeline.status} />
+            <span className="font-medium">{pipeline.name}</span>
+          </div>
+          <span className="text-xs text-muted-foreground">
+            {typeof pipeline.startedAt === "string"
+              ? pipeline.startedAt
+              : formatRelativeTime(pipeline.startedAt)}
+          </span>
+        </div>
+        <div className="flex items-center gap-2 text-xs text-muted-foreground">
+          <GitBranch className="h-3 w-3" />
+          {pipeline.branch}
+          <span className="mx-1">•</span>
+          Triggered by {pipeline.trigger}
+        </div>
+      </CardHeader>
+      <CardContent>
+        <div className="space-y-3">
+          <Progress value={progress} className="h-2" />
+          <div className="flex items-center justify-between">
+            {pipeline.stages.map((stage, index) => (
+              <React.Fragment key={stage.id}>
+                <div className="flex flex-col items-center gap-1">
+                  <div
+                    className={cn(
+                      "h-8 w-8 rounded-full flex items-center justify-center",
+                      statusConfig[stage.status].color
+                    )}
+                  >
+                    {statusConfig[stage.status].icon}
+                  </div>
+                  <span className="text-xs">{stage.name}</span>
+                  {stage.duration && (
+                    <span className="text-xs text-muted-foreground">{stage.duration}</span>
+                  )}
+                </div>
+                {index < pipeline.stages.length - 1 && (
+                  <ChevronRight className="h-4 w-4 text-muted-foreground" />
+                )}
+              </React.Fragment>
+            ))}
+          </div>
+        </div>
+      </CardContent>
+    </Card>
+  )
+}
+
+function EnvironmentCard({ env }: { env: EnvironmentStatus }) {
+  const healthColors = {
+    healthy: "text-green-500",
+    degraded: "text-yellow-500",
+    down: "text-red-500",
+  }
+
+  const healthIcons = {
+    healthy: <CheckCircle className="h-5 w-5" />,
+    degraded: <AlertCircle className="h-5 w-5" />,
+    down: <XCircle className="h-5 w-5" />,
+  }
+
+  return (
+    <Card>
+      <CardHeader className="pb-2">
+        <div className="flex items-center justify-between">
+          <CardTitle className="capitalize flex items-center gap-2">
+            {environmentConfig[env.name].icon}
+            {env.name}
+          </CardTitle>
+          <div className={cn("flex items-center gap-1", healthColors[env.status])}>
+            {healthIcons[env.status]}
+            <span className="text-sm capitalize">{env.status}</span>
+          </div>
+        </div>
+      </CardHeader>
+      <CardContent className="space-y-4">
+        <div className="flex items-center gap-2 text-sm">
+          <ExternalLink className="h-4 w-4 text-muted-foreground" />
+          <a
+            href={env.url}
+            target="_blank"
+            rel="noopener noreferrer"
+            className="text-primary hover:underline truncate"
+          >
+            {env.url}
+          </a>
+        </div>
+
+        <div className="grid grid-cols-2 gap-4 text-sm">
+          {env.uptime && (
+            <div>
+              <p className="text-muted-foreground">Uptime</p>
+              <p className="font-medium">{env.uptime}</p>
+            </div>
+          )}
+          {env.responseTime && (
+            <div>
+              <p className="text-muted-foreground">Response Time</p>
+              <p className="font-medium">{env.responseTime}</p>
+            </div>
+          )}
+        </div>
+
+        {env.lastDeployment && (
+          <div className="pt-2 border-t">
+            <p className="text-xs text-muted-foreground mb-1">Last Deployment</p>
+            <div className="flex items-center gap-2 text-sm">
+              <StatusBadge status={env.lastDeployment.status} />
+              <span className="text-muted-foreground">
+                {typeof env.lastDeployment.startedAt === "string"
+                  ? env.lastDeployment.startedAt
+                  : formatRelativeTime(env.lastDeployment.startedAt)}
+              </span>
+            </div>
+          </div>
+        )}
+      </CardContent>
+    </Card>
+  )
+}
+
+function formatRelativeTime(date: Date): string {
+  const now = new Date()
+  const diff = now.getTime() - date.getTime()
+  const minutes = Math.floor(diff / 60000)
+  const hours = Math.floor(minutes / 60)
+  const days = Math.floor(hours / 24)
+
+  if (minutes < 1) return "just now"
+  if (minutes < 60) return `${minutes}m ago`
+  if (hours < 24) return `${hours}h ago`
+  return `${days}d ago`
+}
+
+// ============================================
+// MAIN COMPONENT
+// ============================================
+
+export function DeploymentDashboard({
+  deployments = [],
+  pipelines = [],
+  environments = [],
+  onDeploy,
+  onRollback,
+  onCancel,
+  onRetry,
+  branches = ["main", "develop", "staging"],
+  className,
+}: DeploymentDashboardProps) {
+  const [selectedBranch, setSelectedBranch] = React.useState(branches[0])
+  const [selectedEnvironment, setSelectedEnvironment] = React.useState<Environment>("staging")
+
+  const activeDeployments = deployments.filter(
+    (d) => d.status === "building" || d.status === "deploying"
+  )
+
+  return (
+    <div className={cn("space-y-6", className)}>
+      {/* Header */}
+      <div className="flex flex-col sm:flex-row gap-4 justify-between">
+        <div>
+          <h1 className="text-2xl font-bold">Deployments</h1>
+          <p className="text-muted-foreground">Manage and monitor your deployments</p>
+        </div>
+        <div className="flex items-center gap-2">
+          <Select value={selectedBranch} onValueChange={setSelectedBranch}>
+            <SelectTrigger className="w-[160px]">
+              <GitBranch className="h-4 w-4 mr-2" />
+              <SelectValue />
+            </SelectTrigger>
+            <SelectContent>
+              {branches.map((branch) => (
+                <SelectItem key={branch} value={branch}>
+                  {branch}
+                </SelectItem>
+              ))}
+            </SelectContent>
+          </Select>
+          <Select value={selectedEnvironment} onValueChange={(v) => setSelectedEnvironment(v as Environment)}>
+            <SelectTrigger className="w-[160px]">
+              <Server className="h-4 w-4 mr-2" />
+              <SelectValue />
+            </SelectTrigger>
+            <SelectContent>
+              <SelectItem value="development">Development</SelectItem>
+              <SelectItem value="staging">Staging</SelectItem>
+              <SelectItem value="production">Production</SelectItem>
+            </SelectContent>
+          </Select>
+          <Button onClick={() => onDeploy?.(selectedEnvironment, selectedBranch)}>
+            <Rocket className="h-4 w-4 mr-2" />
+            Deploy
+          </Button>
+        </div>
+      </div>
+
+      {/* Active Deployments Alert */}
+      {activeDeployments.length > 0 && (
+        <Card className="border-blue-500/50 bg-blue-500/5">
+          <CardContent className="py-4">
+            <div className="flex items-center gap-3">
+              <div className="h-10 w-10 rounded-full bg-blue-500/10 flex items-center justify-center">
+                <Rocket className="h-5 w-5 text-blue-500 animate-pulse" />
+              </div>
+              <div>
+                <p className="font-medium">
+                  {activeDeployments.length} deployment{activeDeployments.length > 1 ? "s" : ""} in progress
+                </p>
+                <p className="text-sm text-muted-foreground">
+                  {activeDeployments.map((d) => d.environment).join(", ")}
+                </p>
+              </div>
+            </div>
+          </CardContent>
+        </Card>
+      )}
+
+      {/* Environments Grid */}
+      <div className="grid gap-4 md:grid-cols-3">
+        {environments.map((env) => (
+          <EnvironmentCard key={env.name} env={env} />
+        ))}
+      </div>
+
+      {/* Tabs */}
+      <Tabs defaultValue="deployments" className="w-full">
+        <TabsList>
+          <TabsTrigger value="deployments">Recent Deployments</TabsTrigger>
+          <TabsTrigger value="pipelines">Pipelines</TabsTrigger>
+        </TabsList>
+
+        <TabsContent value="deployments" className="mt-4 space-y-3">
+          {deployments.length > 0 ? (
+            deployments.map((deployment) => (
+              <DeploymentCard
+                key={deployment.id}
+                deployment={deployment}
+                onRollback={() => onRollback?.(deployment.id)}
+                onCancel={() => onCancel?.(deployment.id)}
+                onRetry={() => onRetry?.(deployment.id)}
+              />
+            ))
+          ) : (
+            <Card>
+              <CardContent className="py-12 text-center">
+                <Rocket className="h-12 w-12 mx-auto text-muted-foreground mb-4" />
+                <p className="text-muted-foreground">No deployments yet</p>
+                <p className="text-sm text-muted-foreground">
+                  Deploy your first version to get started
+                </p>
+              </CardContent>
+            </Card>
+          )}
+        </TabsContent>
+
+        <TabsContent value="pipelines" className="mt-4 space-y-4">
+          {pipelines.length > 0 ? (
+            pipelines.map((pipeline) => (
+              <PipelineCard key={pipeline.id} pipeline={pipeline} />
+            ))
+          ) : (
+            <Card>
+              <CardContent className="py-12 text-center">
+                <Activity className="h-12 w-12 mx-auto text-muted-foreground mb-4" />
+                <p className="text-muted-foreground">No active pipelines</p>
+                <p className="text-sm text-muted-foreground">
+                  Pipelines will appear here when triggered
+                </p>
+              </CardContent>
+            </Card>
+          )}
+        </TabsContent>
+      </Tabs>
+    </div>
+  )
+}
+
+// ============================================
+// PRESET DATA
+// ============================================
+
+export const defaultDeployments: Deployment[] = [
+  {
+    id: "d1",
+    status: "success",
+    environment: "production",
+    branch: "main",
+    commit: "a1b2c3d4e5f6",
+    commitMessage: "feat: Add new dashboard component",
+    author: { name: "John Doe" },
+    startedAt: new Date(Date.now() - 3600000),
+    finishedAt: new Date(Date.now() - 3300000),
+    duration: "5m 12s",
+    url: "https://app.example.com",
+  },
+  {
+    id: "d2",
+    status: "building",
+    environment: "staging",
+    branch: "develop",
+    commit: "f6e5d4c3b2a1",
+    commitMessage: "fix: Resolve login issue",
+    author: { name: "Jane Smith" },
+    startedAt: new Date(Date.now() - 180000),
+  },
+  {
+    id: "d3",
+    status: "failed",
+    environment: "development",
+    branch: "feature/new-api",
+    commit: "1a2b3c4d5e6f",
+    commitMessage: "wip: New API endpoints",
+    author: { name: "Bob Wilson" },
+    startedAt: new Date(Date.now() - 7200000),
+    finishedAt: new Date(Date.now() - 7000000),
+    duration: "3m 20s",
+  },
+]
+
+export const defaultPipelines: Pipeline[] = [
+  {
+    id: "p1",
+    name: "CI/CD Pipeline",
+    status: "building",
+    trigger: "push to main",
+    branch: "main",
+    startedAt: new Date(Date.now() - 300000),
+    stages: [
+      { id: "s1", name: "Build", status: "success", duration: "1m 30s" },
+      { id: "s2", name: "Test", status: "success", duration: "2m 45s" },
+      { id: "s3", name: "Deploy", status: "building" },
+      { id: "s4", name: "Verify", status: "pending" },
+    ],
+  },
+]
+
+export const defaultEnvironments: EnvironmentStatus[] = [
+  {
+    name: "production",
+    status: "healthy",
+    url: "https://app.example.com",
+    uptime: "99.9%",
+    responseTime: "120ms",
+    lastDeployment: defaultDeployments[0],
+  },
+  {
+    name: "staging",
+    status: "degraded",
+    url: "https://staging.example.com",
+    uptime: "98.5%",
+    responseTime: "250ms",
+  },
+  {
+    name: "development",
+    status: "healthy",
+    url: "https://dev.example.com",
+    uptime: "95.0%",
+    responseTime: "180ms",
+  },
+]
+
+export default DeploymentDashboard

package/src/blocks/index.ts

@@ -78,3 +78,27 @@ export * from './wizard'
 // Theme & i18n
 // export * from './theme-creator-block' // TODO: Refactor to match new theme-provider API
 export * from './i18n-editor'
+
+// New Blocks - KPI, E-commerce, Gaming, Security, Communication, DevOps
+export * from './dashboard-kpi'
+export * from './checkout-flow'
+export * from './player-profile'
+export * from './auth-2fa'
+
+// Chat Interface - export with aliases to avoid conflicts with ./chat block
+export {
+  ChatInterface,
+  defaultUsers as defaultChatInterfaceUsers,
+  defaultConversations as defaultChatInterfaceConversations,
+  defaultMessages as defaultChatInterfaceMessages,
+} from './chat-interface'
+export type {
+  ChatInterfaceProps,
+  ChatUser as ChatInterfaceUser,
+  ChatMessage as ChatInterfaceMessage,
+  ChatConversation as ChatInterfaceConversation,
+  ChatAttachment as ChatInterfaceAttachment,
+  ChatReaction as ChatInterfaceReaction,
+} from './chat-interface'
+
+export * from './deployment-dashboard'