@sundaysf/cli-v2 1.0.1 → 1.0.5

package/dist/templates/frontend-nextjs/components/project-generator.tsx

@@ -0,0 +1,558 @@
+"use client"
+
+import { useState, useRef, useEffect } from "react"
+import { motion, AnimatePresence } from "framer-motion"
+import { 
+  Sparkles, 
+  Send, 
+  Check, 
+  Circle, 
+  Loader2, 
+  Code2, 
+  Rocket, 
+  Globe,
+  FileCode,
+  Database,
+  Shield,
+  Layout,
+  Palette,
+  Copy,
+  ChevronRight
+} from "lucide-react"
+import { Button } from "@/components/ui/button"
+import { cn } from "@/lib/utils"
+
+type PipelineStage = "idle" | "design" | "scaffold" | "deploy" | "live"
+
+interface Message {
+  id: string
+  type: "user" | "assistant"
+  content: string
+  stack?: StackItem[]
+}
+
+interface StackItem {
+  icon: React.ReactNode
+  label: string
+  description: string
+}
+
+interface BlueprintSpec {
+  title: string
+  items: string[]
+}
+
+const EXAMPLE_PROMPTS = [
+  "Sistema de facturación multi-tenant con auth JWT y generación de PDFs",
+  "E-commerce con carrito, pagos Stripe y panel admin",
+  "Dashboard de analytics con gráficos en tiempo real",
+  "App de gestión de tareas con colaboración en equipo"
+]
+
+export function ProjectGenerator() {
+  const [messages, setMessages] = useState<Message[]>([])
+  const [inputValue, setInputValue] = useState("")
+  const [isGenerating, setIsGenerating] = useState(false)
+  const [pipelineStage, setPipelineStage] = useState<PipelineStage>("idle")
+  const [activeTab, setActiveTab] = useState<"blueprint" | "pipeline">("blueprint")
+  const [blueprint, setBlueprint] = useState<BlueprintSpec[] | null>(null)
+  const messagesEndRef = useRef<HTMLDivElement>(null)
+  const inputRef = useRef<HTMLTextAreaElement>(null)
+
+  const scrollToBottom = () => {
+    messagesEndRef.current?.scrollIntoView({ behavior: "smooth" })
+  }
+
+  useEffect(() => {
+    scrollToBottom()
+  }, [messages])
+
+  const simulateGeneration = async (prompt: string) => {
+    setIsGenerating(true)
+    
+    // Add user message
+    const userMessage: Message = {
+      id: Date.now().toString(),
+      type: "user",
+      content: prompt
+    }
+    setMessages(prev => [...prev, userMessage])
+
+    // Simulate AI thinking
+    await new Promise(resolve => setTimeout(resolve, 1500))
+
+    // Add assistant response with stack
+    const assistantMessage: Message = {
+      id: (Date.now() + 1).toString(),
+      type: "assistant",
+      content: "Perfecto. He analizado tu requerimiento y propongo el siguiente stack técnico:",
+      stack: [
+        { icon: <Database className="h-4 w-4" />, label: "Multi-tenant", description: "Arquitectura aislada por cliente" },
+        { icon: <Shield className="h-4 w-4" />, label: "Auth JWT", description: "Autenticación segura con tokens" },
+        { icon: <FileCode className="h-4 w-4" />, label: "CRUD completo", description: "Operaciones de datos estándar" },
+        { icon: <Layout className="h-4 w-4" />, label: "Dashboard", description: "Panel de administración" },
+        { icon: <Palette className="h-4 w-4" />, label: "UI Components", description: "Componentes shadcn/ui" },
+      ]
+    }
+    setMessages(prev => [...prev, assistantMessage])
+
+    // Generate blueprint
+    setBlueprint([
+      {
+        title: "Arquitectura",
+        items: ["Next.js 16 App Router", "TypeScript strict mode", "Tailwind CSS + shadcn/ui", "PostgreSQL + Prisma ORM"]
+      },
+      {
+        title: "Autenticación",
+        items: ["JWT con refresh tokens", "Middleware de protección", "Roles y permisos", "Sessions seguras"]
+      },
+      {
+        title: "Features",
+        items: ["CRUD dinámico", "Filtros y búsqueda", "Paginación optimizada", "Exportación de datos"]
+      },
+      {
+        title: "Infraestructura",
+        items: ["Vercel deployment", "Edge functions", "CDN global", "Monitoreo integrado"]
+      }
+    ])
+
+    setIsGenerating(false)
+  }
+
+  const handleGenerate = async () => {
+    if (pipelineStage !== "idle") return
+    
+    setPipelineStage("design")
+    setActiveTab("pipeline")
+
+    // Simulate pipeline stages
+    await new Promise(resolve => setTimeout(resolve, 2000))
+    setPipelineStage("scaffold")
+    await new Promise(resolve => setTimeout(resolve, 2500))
+    setPipelineStage("deploy")
+    await new Promise(resolve => setTimeout(resolve, 2000))
+    setPipelineStage("live")
+  }
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault()
+    if (!inputValue.trim() || isGenerating) return
+
+    await simulateGeneration(inputValue)
+    setInputValue("")
+  }
+
+  const handleExampleClick = (prompt: string) => {
+    setInputValue(prompt)
+    inputRef.current?.focus()
+  }
+
+  const pipelineStages = [
+    { id: "design", label: "Design", icon: Palette, description: "Generando especificaciones" },
+    { id: "scaffold", label: "Scaffold", icon: Code2, description: "Creando estructura del proyecto" },
+    { id: "deploy", label: "Deploy", icon: Rocket, description: "Desplegando a producción" },
+    { id: "live", label: "Live", icon: Globe, description: "¡Tu proyecto está en vivo!" }
+  ]
+
+  const getStageStatus = (stageId: string) => {
+    const stageOrder = ["design", "scaffold", "deploy", "live"]
+    const currentIndex = stageOrder.indexOf(pipelineStage)
+    const stageIndex = stageOrder.indexOf(stageId)
+
+    if (pipelineStage === "idle") return "pending"
+    if (stageIndex < currentIndex) return "completed"
+    if (stageIndex === currentIndex) return "active"
+    return "pending"
+  }
+
+  return (
+    <div className="h-screen w-full bg-background flex">
+      {/* Main Chat Area */}
+      <div className="flex-1 flex flex-col min-w-0">
+        {/* Header */}
+        <header className="flex items-center gap-3 px-6 py-4 border-b border-border/50">
+          <div className="flex items-center justify-center w-9 h-9 rounded-lg bg-primary/10">
+            <Sparkles className="h-5 w-5 text-primary" />
+          </div>
+          <div>
+            <h1 className="text-lg font-semibold text-foreground">Project Generator</h1>
+            <p className="text-xs text-muted-foreground">Describe tu proyecto y genera el scaffolding completo</p>
+          </div>
+        </header>
+
+        {/* Messages Area */}
+        <div className="flex-1 overflow-y-auto px-6 py-6">
+          {messages.length === 0 ? (
+            <div className="h-full flex flex-col items-center justify-center">
+              <motion.div 
+                initial={{ opacity: 0, y: 20 }}
+                animate={{ opacity: 1, y: 0 }}
+                className="text-center max-w-lg"
+              >
+                <div className="w-16 h-16 rounded-2xl bg-primary/10 flex items-center justify-center mx-auto mb-6">
+                  <Sparkles className="h-8 w-8 text-primary" />
+                </div>
+                <h2 className="text-2xl font-semibold text-foreground mb-3">
+                  ¿Qué quieres construir hoy?
+                </h2>
+                <p className="text-muted-foreground mb-8">
+                  Describe tu proyecto y generaré la especificación técnica completa con el stack óptimo para tu caso de uso.
+                </p>
+                
+                <div className="grid gap-2">
+                  <p className="text-xs text-muted-foreground uppercase tracking-wider mb-2">Ejemplos</p>
+                  {EXAMPLE_PROMPTS.map((prompt, index) => (
+                    <motion.button
+                      key={index}
+                      initial={{ opacity: 0, x: -20 }}
+                      animate={{ opacity: 1, x: 0 }}
+                      transition={{ delay: index * 0.1 }}
+                      onClick={() => handleExampleClick(prompt)}
+                      className="group flex items-center gap-3 px-4 py-3 rounded-xl bg-card hover:bg-secondary/80 border border-border/50 hover:border-primary/30 transition-all text-left"
+                    >
+                      <ChevronRight className="h-4 w-4 text-muted-foreground group-hover:text-primary transition-colors" />
+                      <span className="text-sm text-foreground/80 group-hover:text-foreground transition-colors">{prompt}</span>
+                    </motion.button>
+                  ))}
+                </div>
+              </motion.div>
+            </div>
+          ) : (
+            <div className="max-w-3xl mx-auto space-y-6">
+              <AnimatePresence mode="popLayout">
+                {messages.map((message) => (
+                  <motion.div
+                    key={message.id}
+                    initial={{ opacity: 0, y: 20 }}
+                    animate={{ opacity: 1, y: 0 }}
+                    exit={{ opacity: 0, y: -20 }}
+                    className={cn(
+                      "flex gap-4",
+                      message.type === "user" && "justify-end"
+                    )}
+                  >
+                    {message.type === "assistant" && (
+                      <div className="w-8 h-8 rounded-lg bg-primary/10 flex items-center justify-center shrink-0">
+                        <Sparkles className="h-4 w-4 text-primary" />
+                      </div>
+                    )}
+                    <div className={cn(
+                      "max-w-[80%]",
+                      message.type === "user" && "bg-primary text-primary-foreground px-4 py-3 rounded-2xl rounded-tr-md"
+                    )}>
+                      <p className={cn(
+                        "text-sm leading-relaxed",
+                        message.type === "assistant" && "text-foreground"
+                      )}>
+                        {message.content}
+                      </p>
+                      
+                      {message.stack && (
+                        <div className="mt-4 space-y-2">
+                          <p className="text-xs text-muted-foreground uppercase tracking-wider mb-3">Stack confirmado</p>
+                          <div className="grid gap-2">
+                            {message.stack.map((item, index) => (
+                              <motion.div
+                                key={index}
+                                initial={{ opacity: 0, x: -10 }}
+                                animate={{ opacity: 1, x: 0 }}
+                                transition={{ delay: index * 0.1 }}
+                                className="flex items-center gap-3 px-3 py-2 rounded-lg bg-card border border-border/50"
+                              >
+                                <div className="w-7 h-7 rounded-md bg-primary/10 flex items-center justify-center text-primary">
+                                  {item.icon}
+                                </div>
+                                <div>
+                                  <p className="text-sm font-medium text-foreground">{item.label}</p>
+                                  <p className="text-xs text-muted-foreground">{item.description}</p>
+                                </div>
+                              </motion.div>
+                            ))}
+                          </div>
+                        </div>
+                      )}
+                    </div>
+                  </motion.div>
+                ))}
+              </AnimatePresence>
+
+              {isGenerating && (
+                <motion.div
+                  initial={{ opacity: 0 }}
+                  animate={{ opacity: 1 }}
+                  className="flex gap-4"
+                >
+                  <div className="w-8 h-8 rounded-lg bg-primary/10 flex items-center justify-center shrink-0">
+                    <Sparkles className="h-4 w-4 text-primary" />
+                  </div>
+                  <div className="flex items-center gap-2 text-muted-foreground">
+                    <Loader2 className="h-4 w-4 animate-spin" />
+                    <span className="text-sm">Analizando requerimientos...</span>
+                  </div>
+                </motion.div>
+              )}
+
+              <div ref={messagesEndRef} />
+            </div>
+          )}
+        </div>
+
+        {/* Generate Button (when stack is confirmed) */}
+        {messages.length > 0 && !isGenerating && pipelineStage === "idle" && (
+          <motion.div 
+            initial={{ opacity: 0, y: 20 }}
+            animate={{ opacity: 1, y: 0 }}
+            className="px-6 pb-4 flex justify-center"
+          >
+            <Button
+              onClick={handleGenerate}
+              size="lg"
+              className="gap-2 px-8 bg-primary hover:bg-primary/90 text-primary-foreground shadow-lg shadow-primary/25"
+            >
+              <Rocket className="h-4 w-4" />
+              Generar Proyecto
+            </Button>
+          </motion.div>
+        )}
+
+        {/* Input Area */}
+        <div className="border-t border-border/50 bg-card/30 backdrop-blur-sm px-6 py-4">
+          <form onSubmit={handleSubmit} className="max-w-3xl mx-auto">
+            <div className="relative flex items-end gap-3">
+              <div className="flex-1 relative">
+                <textarea
+                  ref={inputRef}
+                  value={inputValue}
+                  onChange={(e) => setInputValue(e.target.value)}
+                  onKeyDown={(e) => {
+                    if (e.key === "Enter" && !e.shiftKey) {
+                      e.preventDefault()
+                      handleSubmit(e)
+                    }
+                  }}
+                  placeholder="Describe tu proyecto..."
+                  rows={1}
+                  className="w-full resize-none rounded-xl bg-input border border-border/50 focus:border-primary/50 focus:ring-1 focus:ring-primary/30 px-4 py-3 pr-12 text-sm text-foreground placeholder:text-muted-foreground outline-none transition-all"
+                  style={{ minHeight: "48px", maxHeight: "150px" }}
+                />
+                <div className="absolute right-2 bottom-2">
+                  <Button
+                    type="submit"
+                    size="icon"
+                    disabled={!inputValue.trim() || isGenerating}
+                    className="h-8 w-8 rounded-lg bg-primary hover:bg-primary/90 disabled:opacity-50"
+                  >
+                    <Send className="h-4 w-4" />
+                  </Button>
+                </div>
+              </div>
+            </div>
+            <p className="text-xs text-muted-foreground text-center mt-2">
+              Enter para enviar · Shift+Enter para nueva línea
+            </p>
+          </form>
+        </div>
+      </div>
+
+      {/* Preview Panel */}
+      <div className="w-[380px] border-l border-border/50 bg-card/30 flex flex-col">
+        {/* Panel Tabs */}
+        <div className="flex border-b border-border/50">
+          <button
+            onClick={() => setActiveTab("blueprint")}
+            className={cn(
+              "flex-1 px-4 py-3 text-sm font-medium transition-colors relative",
+              activeTab === "blueprint" 
+                ? "text-foreground" 
+                : "text-muted-foreground hover:text-foreground"
+            )}
+          >
+            Blueprint
+            {activeTab === "blueprint" && (
+              <motion.div
+                layoutId="activeTab"
+                className="absolute bottom-0 left-0 right-0 h-0.5 bg-primary"
+              />
+            )}
+          </button>
+          <button
+            onClick={() => setActiveTab("pipeline")}
+            className={cn(
+              "flex-1 px-4 py-3 text-sm font-medium transition-colors relative",
+              activeTab === "pipeline" 
+                ? "text-foreground" 
+                : "text-muted-foreground hover:text-foreground"
+            )}
+          >
+            Pipeline
+            {activeTab === "pipeline" && (
+              <motion.div
+                layoutId="activeTab"
+                className="absolute bottom-0 left-0 right-0 h-0.5 bg-primary"
+              />
+            )}
+          </button>
+        </div>
+
+        {/* Panel Content */}
+        <div className="flex-1 overflow-y-auto p-5">
+          <AnimatePresence mode="wait">
+            {activeTab === "blueprint" ? (
+              <motion.div
+                key="blueprint"
+                initial={{ opacity: 0, x: 20 }}
+                animate={{ opacity: 1, x: 0 }}
+                exit={{ opacity: 0, x: -20 }}
+                className="space-y-4"
+              >
+                {blueprint ? (
+                  <>
+                    <div className="flex items-center justify-between">
+                      <h3 className="text-sm font-semibold text-foreground">Especificación Técnica</h3>
+                      <Button variant="ghost" size="sm" className="h-7 gap-1.5 text-xs">
+                        <Copy className="h-3 w-3" />
+                        Copiar
+                      </Button>
+                    </div>
+                    
+                    {blueprint.map((section, index) => (
+                      <motion.div
+                        key={index}
+                        initial={{ opacity: 0, y: 10 }}
+                        animate={{ opacity: 1, y: 0 }}
+                        transition={{ delay: index * 0.1 }}
+                        className="rounded-xl bg-secondary/50 border border-border/50 p-4"
+                      >
+                        <h4 className="text-xs font-semibold text-primary uppercase tracking-wider mb-3">
+                          {section.title}
+                        </h4>
+                        <ul className="space-y-2">
+                          {section.items.map((item, itemIndex) => (
+                            <li key={itemIndex} className="flex items-center gap-2 text-sm text-foreground/80">
+                              <div className="w-1.5 h-1.5 rounded-full bg-primary/60" />
+                              {item}
+                            </li>
+                          ))}
+                        </ul>
+                      </motion.div>
+                    ))}
+                  </>
+                ) : (
+                  <div className="h-full flex flex-col items-center justify-center py-16 text-center">
+                    <div className="w-12 h-12 rounded-xl bg-secondary/50 flex items-center justify-center mb-4">
+                      <FileCode className="h-6 w-6 text-muted-foreground" />
+                    </div>
+                    <p className="text-sm text-muted-foreground">
+                      Sin blueprint todavía
+                    </p>
+                    <p className="text-xs text-muted-foreground/60 mt-1">
+                      Describe tu proyecto para generar las especificaciones
+                    </p>
+                  </div>
+                )}
+              </motion.div>
+            ) : (
+              <motion.div
+                key="pipeline"
+                initial={{ opacity: 0, x: 20 }}
+                animate={{ opacity: 1, x: 0 }}
+                exit={{ opacity: 0, x: -20 }}
+                className="space-y-1"
+              >
+                {pipelineStages.map((stage, index) => {
+                  const status = getStageStatus(stage.id)
+                  const Icon = stage.icon
+
+                  return (
+                    <motion.div
+                      key={stage.id}
+                      initial={{ opacity: 0, x: 20 }}
+                      animate={{ opacity: 1, x: 0 }}
+                      transition={{ delay: index * 0.1 }}
+                      className={cn(
+                        "flex items-center gap-4 p-4 rounded-xl transition-all",
+                        status === "active" && "bg-primary/10 border border-primary/30",
+                        status === "completed" && "opacity-70"
+                      )}
+                    >
+                      <div className={cn(
+                        "w-10 h-10 rounded-xl flex items-center justify-center transition-colors",
+                        status === "active" && "bg-primary text-primary-foreground",
+                        status === "completed" && "bg-primary/20 text-primary",
+                        status === "pending" && "bg-secondary text-muted-foreground"
+                      )}>
+                        {status === "completed" ? (
+                          <Check className="h-5 w-5" />
+                        ) : status === "active" ? (
+                          <Loader2 className="h-5 w-5 animate-spin" />
+                        ) : (
+                          <Icon className="h-5 w-5" />
+                        )}
+                      </div>
+                      <div className="flex-1 min-w-0">
+                        <p className={cn(
+                          "text-sm font-medium",
+                          status === "active" ? "text-foreground" : "text-muted-foreground"
+                        )}>
+                          {stage.label}
+                        </p>
+                        {status === "active" && (
+                          <motion.p
+                            initial={{ opacity: 0 }}
+                            animate={{ opacity: 1 }}
+                            className="text-xs text-muted-foreground mt-0.5"
+                          >
+                            {stage.description}
+                          </motion.p>
+                        )}
+                      </div>
+                      {status === "completed" && (
+                        <div className="w-2 h-2 rounded-full bg-primary" />
+                      )}
+                    </motion.div>
+                  )
+                })}
+
+                {pipelineStage === "idle" && (
+                  <div className="h-full flex flex-col items-center justify-center py-16 text-center">
+                    <div className="w-12 h-12 rounded-xl bg-secondary/50 flex items-center justify-center mb-4">
+                      <Rocket className="h-6 w-6 text-muted-foreground" />
+                    </div>
+                    <p className="text-sm text-muted-foreground">
+                      Pipeline inactivo
+                    </p>
+                    <p className="text-xs text-muted-foreground/60 mt-1">
+                      Genera un proyecto para ver el progreso aquí
+                    </p>
+                  </div>
+                )}
+
+                {pipelineStage === "live" && (
+                  <motion.div
+                    initial={{ opacity: 0, scale: 0.95 }}
+                    animate={{ opacity: 1, scale: 1 }}
+                    className="mt-6 p-4 rounded-xl bg-primary/10 border border-primary/30"
+                  >
+                    <div className="flex items-center gap-3 mb-3">
+                      <div className="w-8 h-8 rounded-lg bg-primary flex items-center justify-center">
+                        <Check className="h-4 w-4 text-primary-foreground" />
+                      </div>
+                      <div>
+                        <p className="text-sm font-semibold text-foreground">¡Proyecto generado!</p>
+                        <p className="text-xs text-muted-foreground">Listo para descargar</p>
+                      </div>
+                    </div>
+                    <Button className="w-full gap-2 bg-primary hover:bg-primary/90">
+                      <Globe className="h-4 w-4" />
+                      Ver Proyecto en Vivo
+                    </Button>
+                  </motion.div>
+                )}
+              </motion.div>
+            )}
+          </AnimatePresence>
+        </div>
+      </div>
+    </div>
+  )
+}

package/dist/templates/frontend-nextjs/components/theme-provider.tsx

@@ -0,0 +1,11 @@
+'use client'
+
+import * as React from 'react'
+import {
+  ThemeProvider as NextThemesProvider,
+  type ThemeProviderProps,
+} from 'next-themes'
+
+export function ThemeProvider({ children, ...props }: ThemeProviderProps) {
+  return <NextThemesProvider {...props}>{children}</NextThemesProvider>
+}

package/dist/templates/frontend-nextjs/components/ui/accordion.tsx

@@ -0,0 +1,66 @@
+'use client'
+
+import * as React from 'react'
+import * as AccordionPrimitive from '@radix-ui/react-accordion'
+import { ChevronDownIcon } from 'lucide-react'
+
+import { cn } from '@/lib/utils'
+
+function Accordion({
+  ...props
+}: React.ComponentProps<typeof AccordionPrimitive.Root>) {
+  return <AccordionPrimitive.Root data-slot="accordion" {...props} />
+}
+
+function AccordionItem({
+  className,
+  ...props
+}: React.ComponentProps<typeof AccordionPrimitive.Item>) {
+  return (
+    <AccordionPrimitive.Item
+      data-slot="accordion-item"
+      className={cn('border-b last:border-b-0', className)}
+      {...props}
+    />
+  )
+}
+
+function AccordionTrigger({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof AccordionPrimitive.Trigger>) {
+  return (
+    <AccordionPrimitive.Header className="flex">
+      <AccordionPrimitive.Trigger
+        data-slot="accordion-trigger"
+        className={cn(
+          'focus-visible:border-ring focus-visible:ring-ring/50 flex flex-1 items-start justify-between gap-4 rounded-md py-4 text-left text-sm font-medium transition-all outline-none hover:underline focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 [&[data-state=open]>svg]:rotate-180',
+          className,
+        )}
+        {...props}
+      >
+        {children}
+        <ChevronDownIcon className="text-muted-foreground pointer-events-none size-4 shrink-0 translate-y-0.5 transition-transform duration-200" />
+      </AccordionPrimitive.Trigger>
+    </AccordionPrimitive.Header>
+  )
+}
+
+function AccordionContent({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof AccordionPrimitive.Content>) {
+  return (
+    <AccordionPrimitive.Content
+      data-slot="accordion-content"
+      className="data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down overflow-hidden text-sm"
+      {...props}
+    >
+      <div className={cn('pt-0 pb-4', className)}>{children}</div>
+    </AccordionPrimitive.Content>
+  )
+}
+
+export { Accordion, AccordionItem, AccordionTrigger, AccordionContent }