openprompt-lang 0.3.0 → 0.4.0

package/src/commands/component.js

@@ -1,143 +1,208 @@
-import { readFileSync, writeFileSync, existsSync, mkdirSync, readdirSync, statSync, cpSync } from "fs";
-import { join, relative, basename } from "path";
-import chalk from "chalk";
-
-const MANIFEST_FILE = "componentes.json";
+import {
+  readFileSync,
+  writeFileSync,
+  existsSync,
+  mkdirSync,
+  readdirSync,
+  statSync,
+  copyFileSync,
+} from "fs"
+import { join, relative, basename, extname, dirname } from "path"
+import { fileURLToPath } from "url"
+import chalk from "chalk"
+import {
+  getLanguages,
+  getLanguageIndex,
+  searchTemplates,
+  getTemplate,
+} from "../utils/language-loader.js"
+
+const MANIFEST_FILE = "componentes.json"
 
 export async function componentList(options) {
-  const cwd = process.cwd();
-  const config = loadProjectConfig(cwd);
-  const libPath = options.library || config?.components?.library || null;
-
-  console.log(chalk.cyan("\n📦 Componentes disponibles\n"));
-
-  // Componentes del proyecto
-  const sourceDir = config?.components?.source || join(cwd, "src/components/ui");
-  if (existsSync(sourceDir)) {
-    console.log(chalk.blue(`📁 Proyecto (${relative(cwd, sourceDir)}/):`));
-    const files = listComponents(sourceDir);
-    if (files.length === 0) {
-      console.log("   (vacío)");
-    } else {
-      for (const f of files) {
-        const tags = extractTags(join(sourceDir, f));
-        console.log(`   ✅ ${chalk.bold(f.replace(".tsx", ""))}${tags ? ` — ${tags}` : ""}`);
-      }
+  const cwd = process.cwd()
+  const config = loadProjectConfig(cwd)
+  const libPath = options.library || config?.components?.library || null
+  const langId = config?.lenguaje || "react"
+
+  console.log(chalk.cyan("\n📦 Available components\n"))
+
+  // 1. From language module templates
+  const index = getLanguageIndex(langId)
+  if (index?.templates) {
+    console.log(chalk.blue(`📚 Templates (${langId} module):`))
+    for (const tmpl of index.templates) {
+      const teachBadge = tmpl.hasTeachMe ? chalk.green(" [teach]") : ""
+      const darkBadge = tmpl.darkMode ? " 🌙" : ""
+      console.log(`   📦 ${chalk.bold(tmpl.id)}${teachBadge}${darkBadge}`)
+      console.log(`      ${tmpl.description}`)
+      console.log(`      deps: ${tmpl.dependencies?.join(", ") || "none"}`)
+      console.log("")
     }
-  } else {
-    console.log(chalk.yellow(`  ⚠️  No existe ${relative(cwd, sourceDir)}/`));
   }
 
-  // Componentes de la biblioteca
+  // 2. From library (diseno-componentes)
   if (libPath && existsSync(libPath)) {
-    const manifestPath = join(libPath, MANIFEST_FILE);
+    const manifestPath = join(libPath, MANIFEST_FILE)
     if (existsSync(manifestPath)) {
-      const manifest = JSON.parse(readFileSync(manifestPath, "utf-8"));
-      console.log(chalk.blue(`\n📚 Biblioteca (${relative(cwd, libPath)}/):`));
+      const manifest = JSON.parse(readFileSync(manifestPath, "utf-8"))
+      console.log(chalk.blue(`📚 Library (${relative(cwd, libPath)}/):`))
       for (const [name, info] of Object.entries(manifest.componentes)) {
-        const tags = info.tags ? info.tags.join(", ") : "";
-        console.log(`   📦 ${chalk.bold(name)}${tags ? ` — ${tags}` : ""}`);
-        if (info.variants) console.log(`      Variants: ${info.variants.join(", ")}`);
+        const tags = info.tags ? info.tags.join(", ") : ""
+        console.log(`   📦 ${chalk.bold(name)}${tags ? ` — ${tags}` : ""}`)
+        if (info.variants) console.log(`      Variants: ${info.variants.join(", ")}`)
+        console.log("")
       }
     }
   } else if (libPath) {
-    console.log(chalk.yellow(`\n  ⚠️  Biblioteca no encontrada: ${libPath}`));
+    console.log(chalk.yellow(`  ⚠️  Library not found: ${libPath}`))
+  }
+
+  // 3. Project components
+  const sourceDir = config?.components?.source || join(cwd, "src/components/ui")
+  if (existsSync(sourceDir)) {
+    console.log(chalk.blue(`📁 Project (${relative(cwd, sourceDir)}/):`))
+    const files = listComponents(sourceDir)
+    if (files.length === 0) {
+      console.log("   (empty)\n")
+    } else {
+      for (const f of files) {
+        const tags = extractTags(join(sourceDir, f))
+        console.log(`   ✅ ${chalk.bold(f.replace(/\.(tsx|ts)$/, ""))}${tags ? ` — ${tags}` : ""}`)
+      }
+      console.log("")
+    }
   }
 
-  console.log("");
+  console.log(chalk.gray(`  Tip: npx openPrompt-Lang component add <id> --template`))
+  console.log(chalk.gray(`  Tip: npx openPrompt-Lang teach <id> for component lessons\n`))
 }
 
 export async function componentAdd(name, options) {
-  const cwd = process.cwd();
-  const config = loadProjectConfig(cwd);
-  const libPath = options.library || config?.components?.library || null;
+  const cwd = process.cwd()
+  const config = loadProjectConfig(cwd)
+  const langId = config?.lenguaje || "react"
+
+  // Try language module template first
+  if (options.template) {
+    const template = getTemplate(name, langId)
+    if (!template) {
+      console.log(chalk.red(`\n❌ Template "${name}" not found in ${langId} module\n`))
+      console.log(chalk.cyan(`   Run: npx openPrompt-Lang lang index ${langId}\n`))
+      return
+    }
+
+    const targetDir = config?.components?.source || join(cwd, "src/components/ui")
+    mkdirSync(targetDir, { recursive: true })
+
+    const ext = extname(template.metadata.file) || ".tsx"
+    const outputName = options.output || name
+    const targetFile = join(targetDir, `${outputName}${ext}`)
+
+    let content = template.content
+
+    // Process variants if specified
+    if (options.variants) {
+      const variants = options.variants.split(",").map((v) => v.trim())
+      content = injectVariants(content, variants)
+    }
+
+    if (existsSync(targetFile) && !options.force) {
+      console.log(chalk.yellow(`  ⚠️  ${outputName}${ext} already exists. Skipping.\n`))
+      console.log(chalk.cyan(`  Use --force to overwrite.\n`))
+      return
+    }
 
+    writeFileSync(targetFile, content, "utf-8")
+    console.log(chalk.green(`\n  ✅ ${outputName} added from "${name}" template\n`))
+
+    if (template.metadata.hasTeachMe) {
+      console.log(
+        chalk.cyan(`  💡 Tip: npx openPrompt-Lang teach ${name} to learn about this component`)
+      )
+    }
+    if (template.metadata.fixHistory?.length > 0) {
+      console.log(
+        chalk.yellow(`  🐛 This component has ${template.metadata.fixHistory.length} learned fixes`)
+      )
+      console.log(chalk.cyan(`     npx openPrompt-Lang lang errors ${langId} --template ${name}\n`))
+    }
+    return
+  }
+
+  // Fallback to legacy library
+  const libPath = options.library || config?.components?.library || null
   if (!libPath || !existsSync(libPath)) {
-    console.log(chalk.red(`\n❌ Biblioteca no encontrada: ${libPath || "no configurada"}`));
-    console.log(chalk.cyan("   Configura components.library en prompt-lang.json o usa --library\n"));
-    return;
+    console.log(chalk.red(`\n❌ Library not found: ${libPath || "not configured"}`))
+    console.log(
+      chalk.cyan("   Configure components.library in prompt-lang.json or use --template\n")
+    )
+    return
   }
 
-  const manifestPath = join(libPath, MANIFEST_FILE);
+  const manifestPath = join(libPath, MANIFEST_FILE)
   if (!existsSync(manifestPath)) {
-    console.log(chalk.red("\n❌ La biblioteca no tiene componentes.json\n"));
-    return;
+    console.log(chalk.red("\n❌ Library has no componentes.json\n"))
+    return
   }
 
-  const manifest = JSON.parse(readFileSync(manifestPath, "utf-8"));
-  const compInfo = manifest.componentes?.[name];
+  const manifest = JSON.parse(readFileSync(manifestPath, "utf-8"))
+  const compInfo = manifest.componentes?.[name]
   if (!compInfo) {
-    console.log(chalk.red(`\n❌ Componente "${name}" no encontrado en la biblioteca`));
-    console.log(chalk.cyan(`   Componentes disponibles: ${Object.keys(manifest.componentes).join(", ")}\n`));
-    return;
+    console.log(chalk.red(`\n❌ Component "${name}" not found in library\n`))
+    return
   }
 
-  const srcFile = join(libPath, compInfo.path);
+  const srcFile = join(libPath, compInfo.path)
   if (!existsSync(srcFile)) {
-    console.log(chalk.red(`\n❌ Archivo no encontrado: ${compInfo.path}\n`));
-    return;
+    console.log(chalk.red(`\n❌ File not found: ${compInfo.path}\n`))
+    return
   }
 
-  const targetDir = config?.components?.source || join(cwd, "src/components/ui");
-  mkdirSync(targetDir, { recursive: true });
+  const targetDir = config?.components?.source || join(cwd, "src/components/ui")
+  mkdirSync(targetDir, { recursive: true })
 
-  const targetFile = join(targetDir, basename(srcFile));
+  const targetFile = join(targetDir, basename(srcFile))
   if (existsSync(targetFile)) {
-    console.log(chalk.yellow(`\n  ⚠️  ${basename(srcFile)} ya existe en el proyecto. Sobrescrito.\n`));
+    console.log(chalk.yellow(`  ⚠️  ${basename(srcFile)} already exists. Overwritten.\n`))
   }
 
-  const content = readFileSync(srcFile, "utf-8");
-  writeFileSync(targetFile, content, "utf-8");
-  console.log(chalk.green(`\n  ✅ ${name} agregado a src/components/ui/${basename(srcFile)}\n`));
+  copyFileSync(srcFile, targetFile)
+  console.log(chalk.green(`\n  ✅ ${name} added to src/components/ui/${basename(srcFile)}\n`))
 }
 
 export async function componentInit(options) {
-  const libPath = options.library || join(process.cwd(), "diseno-componentes");
+  const libPath = options.library || join(process.cwd(), "diseno-componentes")
 
   if (existsSync(libPath) && readdirSync(libPath).length > 0) {
-    console.log(chalk.yellow(`\n  ⚠️  El directorio ${libPath} ya existe y no está vacío.\n`));
-    return;
+    console.log(chalk.yellow(`\n  ⚠️  ${libPath} already exists and is not empty.\n`))
+    return
   }
 
-  mkdirSync(join(libPath, "ui"), { recursive: true });
-  mkdirSync(join(libPath, "layouts"), { recursive: true });
-
-  // UI Components
-  const buttonContent = `import { cva, type VariantProps } from "class-variance-authority"
-import { memo } from "react"
-
-const buttonVariants = cva(
-  "inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
-  {
-    variants: {
-      variant: {
-        primary: "bg-blue-600 text-white hover:bg-blue-700",
-        secondary: "bg-gray-100 text-gray-900 hover:bg-gray-200",
-        danger: "bg-red-600 text-white hover:bg-red-700",
-        ghost: "hover:bg-gray-100 hover:text-gray-900",
-      },
-      size: {
-        default: "h-10 px-4 py-2",
-        sm: "h-9 rounded-md px-3",
-        lg: "h-11 rounded-md px-8",
-        icon: "h-10 w-10",
-      },
-    },
-    defaultVariants: { variant: "primary", size: "default" },
-  }
-)
+  mkdirSync(join(libPath, "ui"), { recursive: true })
+  mkdirSync(join(libPath, "layouts"), { recursive: true })
 
-interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof buttonVariants> {}
+  const buttonContent =
+    readFromModule("react", "templates/ui/Button.template.tsx") ||
+    `import { memo } from "react"
+
+interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+  variant?: "primary" | "secondary" | "danger" | "ghost"
+  size?: "sm" | "default" | "lg"
+  loading?: boolean
+}
 
-const Button = memo<ButtonProps>(({ className, variant, size, ...props }) => (
-  <button className={buttonVariants({ variant, size, className })} {...props} />
+const Button = memo<ButtonProps>(({ variant = "primary", size = "default", loading, children, ...rest }) => (
+  <button type="button" className={\`btn btn-\${variant} btn-\${size}\`} disabled={loading} {...rest}>
+    {loading && <span className="spinner" />}
+    {children}
+  </button>
 ))
 Button.displayName = "Button"
-
-export { Button, buttonVariants }
+export { Button }
 `
 
-  const confirmModalContent = `import { useEffect, useRef, type ReactNode } from "react"
+  const confirmModalContent = `import { useEffect, useRef } from "react"
 import { Button } from "./Button"
 
 interface ConfirmModalProps {
@@ -146,54 +211,20 @@ interface ConfirmModalProps {
   onCancel: () => void
   title: string
   message: string
-  confirmLabel?: string
-  cancelLabel?: string
   variant?: "danger" | "primary"
   loading?: boolean
-  children?: ReactNode
 }
 
-export function ConfirmModal({
-  open,
-  onConfirm,
-  onCancel,
-  title,
-  message,
-  confirmLabel = "Confirmar",
-  cancelLabel = "Cancelar",
-  variant = "danger",
-  loading = false,
-  children,
-}: ConfirmModalProps) {
-  const overlayRef = useRef<HTMLDivElement>(null)
-
-  useEffect(() => {
-    const handleEscape = (e: KeyboardEvent) => {
-      if (e.key === "Escape" && !loading) onCancel()
-    }
-    if (open) document.addEventListener("keydown", handleEscape)
-    return () => document.removeEventListener("keydown", handleEscape)
-  }, [open, loading, onCancel])
-
+export function ConfirmModal({ open, onConfirm, onCancel, title, message, variant = "danger", loading }: ConfirmModalProps) {
   if (!open) return null
-
   return (
-    <div
-      ref={overlayRef}
-      className="fixed inset-0 z-50 flex items-center justify-center bg-black/50 p-4"
-      onClick={(e) => { if (e.target === overlayRef && !loading) onCancel() }}
-    >
-      <div className="w-full max-w-md rounded-lg bg-white p-6 shadow-xl" role="dialog" aria-modal="true">
-        <h3 className="text-lg font-semibold text-gray-900">{title}</h3>
-        {message && <p className="mt-2 text-sm text-gray-600">{message}</p>}
-        {children && <div className="mt-3">{children}</div>}
-        <div className="mt-6 flex justify-end gap-3">
-          <Button variant="ghost" onClick={onCancel} disabled={loading}>
-            {cancelLabel}
-          </Button>
-          <Button variant={variant} onClick={onConfirm} disabled={loading}>
-            {loading ? "Procesando..." : confirmLabel}
-          </Button>
+    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50" onClick={onCancel}>
+      <div className="rounded-lg bg-white p-6 shadow-xl" onClick={(e) => e.stopPropagation()}>
+        <h3>{title}</h3>
+        <p>{message}</p>
+        <div className="mt-4 flex gap-2 justify-end">
+          <Button variant="ghost" onClick={onCancel}>Cancel</Button>
+          <Button variant={variant} onClick={onConfirm} loading={loading}>Confirm</Button>
         </div>
       </div>
     </div>
@@ -201,126 +232,125 @@ export function ConfirmModal({
 }
 `
 
-  const inputContent = `import { forwardRef, type InputHTMLAttributes } from "react"
-
-interface InputProps extends InputHTMLAttributes<HTMLInputElement> {
-  label?: string
-  error?: string
-}
-
-const Input = forwardRef<HTMLInputElement, InputProps>(({ label, error, className, ...props }, ref) => (
-  <div className="w-full">
-    {label && <label className="mb-1 block text-sm font-medium text-gray-700">{label}</label>}
-    <input
-      ref={ref}
-      className={\`flex h-10 w-full rounded-md border px-3 py-2 text-sm placeholder:text-gray-400 focus:outline-none focus:ring-2 focus:ring-blue-500 disabled:opacity-50 \${
-        error ? "border-red-500 focus:ring-red-500" : "border-gray-300"
-      } \${className || ""}\`}
-      {...props}
-    />
-    {error && <p className="mt-1 text-xs text-red-600">{error}</p>}
-  </div>
-))
-Input.displayName = "Input"
-
-export { Input }
-`
-
-  writeFileSync(join(libPath, "ui/Button.tsx"), buttonContent, "utf-8");
-  writeFileSync(join(libPath, "ui/ConfirmModal.tsx"), confirmModalContent, "utf-8");
-  writeFileSync(join(libPath, "ui/Input.tsx"), inputContent, "utf-8");
+  writeFileSync(join(libPath, "ui/Button.tsx"), buttonContent, "utf-8")
+  writeFileSync(join(libPath, "ui/ConfirmModal.tsx"), confirmModalContent, "utf-8")
 
-  // Barrel export
-  writeFileSync(join(libPath, "ui/index.ts"), `export { Button, buttonVariants } from "./Button"
+  writeFileSync(
+    join(libPath, "ui/index.ts"),
+    `export { Button } from "./Button"
 export { ConfirmModal } from "./ConfirmModal"
-export { Input } from "./Input"
-`, "utf-8");
+`,
+    "utf-8"
+  )
 
-  // Manifest
   const manifest = {
     name: options.name || "mi-diseno",
     version: "1.0.0",
-    descripcion: "Biblioteca de componentes reutilizables",
+    description: "Reusable component library",
     componentes: {
       Button: {
         path: "ui/Button.tsx",
-        tags: ["ui", "form", "accion"],
+        tags: ["ui", "form", "action"],
         variants: ["primary", "secondary", "danger", "ghost"],
-        descripcion: "Botón con variantes de color y tamaño",
+        description: "Button with variants",
       },
       ConfirmModal: {
         path: "ui/ConfirmModal.tsx",
-        tags: ["ui", "modal", "confirmacion", "destructivo"],
-        descripcion: "Modal centrado para confirmar acciones destructivas con soporte de teclado",
-      },
-      Input: {
-        path: "ui/Input.tsx",
-        tags: ["ui", "form", "input"],
-        descripcion: "Input con label, error y forwardRef",
+        tags: ["ui", "modal", "confirmation"],
+        description: "Confirmation modal dialog",
       },
     },
-  };
+  }
 
-  writeFileSync(join(libPath, MANIFEST_FILE), JSON.stringify(manifest, null, 2), "utf-8");
-  console.log(chalk.green(`\n  ✅ Biblioteca inicializada en ${libPath}/`));
-  console.log(chalk.cyan(`  3 componentes creados: Button, ConfirmModal, Input`));
-  console.log(chalk.cyan(`  Agrega a prompt-lang.json: "components": { "library": "${libPath}" }\n`));
+  writeFileSync(join(libPath, MANIFEST_FILE), JSON.stringify(manifest, null, 2), "utf-8")
+  console.log(chalk.green(`\n  ✅ Library initialized at ${libPath}/`))
+  console.log(chalk.cyan(`  2 components created: Button, ConfirmModal\n`))
 }
 
 export async function componentManifest(options) {
-  const cwd = process.cwd();
-  const config = loadProjectConfig(cwd);
-  const libPath = options.library || config?.components?.library || null;
+  const cwd = process.cwd()
+  const config = loadProjectConfig(cwd)
+  const libPath = options.library || config?.components?.library || null
 
   if (!libPath || !existsSync(libPath)) {
-    console.log(chalk.red("\n❌ Biblioteca no encontrada\n"));
-    return;
+    console.log(chalk.red("\n❌ Library not found\n"))
+    return
   }
 
-  const manifestPath = join(libPath, MANIFEST_FILE);
+  const manifestPath = join(libPath, MANIFEST_FILE)
   if (!existsSync(manifestPath)) {
-    console.log(chalk.yellow("\n  ⚠️  No hay componentes.json en la biblioteca\n"));
-    return;
+    console.log(chalk.yellow("\n  ⚠️  No componentes.json in library\n"))
+    return
   }
 
-  const manifest = JSON.parse(readFileSync(manifestPath, "utf-8"));
-  console.log(chalk.cyan(`\n📚 ${manifest.name} v${manifest.version}`));
-  console.log(`   ${manifest.descripcion || ""}`);
-  console.log(`\n   Componentes (${Object.keys(manifest.componentes || {}).length}):`);
+  const manifest = JSON.parse(readFileSync(manifestPath, "utf-8"))
+  console.log(chalk.cyan(`\n📚 ${manifest.name} v${manifest.version}`))
+  console.log(`   ${manifest.description || ""}`)
+  console.log(`\n   Components (${Object.keys(manifest.componentes || {}).length}):`)
   for (const [name, info] of Object.entries(manifest.componentes || {})) {
-    console.log(`   📦 ${chalk.bold(name)} → ${info.path}`);
-    if (info.descripcion) console.log(`      ${info.descripcion}`);
-    if (info.tags) console.log(`      Tags: ${info.tags.join(", ")}`);
+    console.log(`   📦 ${chalk.bold(name)} → ${info.path}`)
+    if (info.description) console.log(`      ${info.description}`)
+    if (info.tags) console.log(`      Tags: ${info.tags.join(", ")}`)
   }
-  console.log("");
+  console.log("")
 }
 
 // ─── Helpers ─────────────────────────────────────────────────────────────────
 
 function loadProjectConfig(cwd) {
-  const configPath = join(cwd, "prompt-lang.json");
-  if (!existsSync(configPath)) return null;
+  const configPath = join(cwd, "prompt-lang.json")
+  if (!existsSync(configPath)) return null
   try {
-    return JSON.parse(readFileSync(configPath, "utf-8"));
+    return JSON.parse(readFileSync(configPath, "utf-8"))
   } catch {
-    return null;
+    return null
   }
 }
 
 function listComponents(dir) {
-  const entries = readdirSync(dir, { withFileTypes: true });
+  const entries = readdirSync(dir, { withFileTypes: true })
   return entries
-    .filter(e => e.isFile() && (e.name.endsWith(".tsx") || e.name.endsWith(".tsx")))
-    .map(e => e.name)
-    .sort();
+    .filter((e) => e.isFile() && (e.name.endsWith(".tsx") || e.name.endsWith(".ts")))
+    .map((e) => e.name)
+    .sort()
 }
 
 function extractTags(filePath) {
   try {
-    const content = readFileSync(filePath, "utf-8");
-    const match = content.match(/\/\/\s*@kind\((\w+)\)/);
-    return match ? match[1] : null;
+    const content = readFileSync(filePath, "utf-8")
+    const match = content.match(/\/\/\s*@kind\((\w+)\)/)
+    return match ? match[1] : null
+  } catch {
+    return null
+  }
+}
+
+function injectVariants(content, variants) {
+  // Find the variants section in cva or the variant enum and filter
+  const variantMatch = content.match(/variant:\s*\{([^}]+)\}/s)
+  if (!variantMatch) return content
+
+  const variantBlock = variantMatch[1]
+  const variantLines = variantBlock.split("\n").map((l) => l.trim())
+  const kept = variantLines.filter((l) =>
+    variants.some((v) => l.startsWith(v + ":") || l.startsWith(`"${v}"`))
+  )
+
+  if (kept.length === 0) return content
+
+  return content.replace(
+    /variant:\s*\{[^}]+\}/s,
+    `variant: {\n${kept.map((l) => `      ${l}`).join("\n")}\n    }`
+  )
+}
+
+function readFromModule(langId, relativePath) {
+  try {
+    const __dirname = dirname(fileURLToPath(import.meta.url))
+    const fullPath = join(__dirname, "..", "templates", "langs", langId, relativePath)
+    if (!existsSync(fullPath)) return null
+    return readFileSync(fullPath, "utf-8")
   } catch {
-    return null;
+    return null
   }
 }