openprompt-lang 0.3.0

package/src/commands/component.js

@@ -0,0 +1,326 @@
+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";
+
+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}` : ""}`);
+      }
+    }
+  } else {
+    console.log(chalk.yellow(`  ⚠️  No existe ${relative(cwd, sourceDir)}/`));
+  }
+
+  // Componentes de la biblioteca
+  if (libPath && existsSync(libPath)) {
+    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)}/):`));
+      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(", ")}`);
+      }
+    }
+  } else if (libPath) {
+    console.log(chalk.yellow(`\n  ⚠️  Biblioteca no encontrada: ${libPath}`));
+  }
+
+  console.log("");
+}
+
+export async function componentAdd(name, options) {
+  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: ${libPath || "no configurada"}`));
+    console.log(chalk.cyan("   Configura components.library en prompt-lang.json o usa --library\n"));
+    return;
+  }
+
+  const manifestPath = join(libPath, MANIFEST_FILE);
+  if (!existsSync(manifestPath)) {
+    console.log(chalk.red("\n❌ La biblioteca no tiene componentes.json\n"));
+    return;
+  }
+
+  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;
+  }
+
+  const srcFile = join(libPath, compInfo.path);
+  if (!existsSync(srcFile)) {
+    console.log(chalk.red(`\n❌ Archivo no encontrado: ${compInfo.path}\n`));
+    return;
+  }
+
+  const targetDir = config?.components?.source || join(cwd, "src/components/ui");
+  mkdirSync(targetDir, { recursive: true });
+
+  const targetFile = join(targetDir, basename(srcFile));
+  if (existsSync(targetFile)) {
+    console.log(chalk.yellow(`\n  ⚠️  ${basename(srcFile)} ya existe en el proyecto. Sobrescrito.\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`));
+}
+
+export async function componentInit(options) {
+  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;
+  }
+
+  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" },
+  }
+)
+
+interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof buttonVariants> {}
+
+const Button = memo<ButtonProps>(({ className, variant, size, ...props }) => (
+  <button className={buttonVariants({ variant, size, className })} {...props} />
+))
+Button.displayName = "Button"
+
+export { Button, buttonVariants }
+`
+
+  const confirmModalContent = `import { useEffect, useRef, type ReactNode } from "react"
+import { Button } from "./Button"
+
+interface ConfirmModalProps {
+  open: boolean
+  onConfirm: () => void
+  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])
+
+  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>
+      </div>
+    </div>
+  )
+}
+`
+
+  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");
+
+  // Barrel export
+  writeFileSync(join(libPath, "ui/index.ts"), `export { Button, buttonVariants } from "./Button"
+export { ConfirmModal } from "./ConfirmModal"
+export { Input } from "./Input"
+`, "utf-8");
+
+  // Manifest
+  const manifest = {
+    name: options.name || "mi-diseno",
+    version: "1.0.0",
+    descripcion: "Biblioteca de componentes reutilizables",
+    componentes: {
+      Button: {
+        path: "ui/Button.tsx",
+        tags: ["ui", "form", "accion"],
+        variants: ["primary", "secondary", "danger", "ghost"],
+        descripcion: "Botón con variantes de color y tamaño",
+      },
+      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",
+      },
+    },
+  };
+
+  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`));
+}
+
+export async function componentManifest(options) {
+  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;
+  }
+
+  const manifestPath = join(libPath, MANIFEST_FILE);
+  if (!existsSync(manifestPath)) {
+    console.log(chalk.yellow("\n  ⚠️  No hay componentes.json en la biblioteca\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}):`);
+  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("");
+}
+
+// ─── Helpers ─────────────────────────────────────────────────────────────────
+
+function loadProjectConfig(cwd) {
+  const configPath = join(cwd, "prompt-lang.json");
+  if (!existsSync(configPath)) return null;
+  try {
+    return JSON.parse(readFileSync(configPath, "utf-8"));
+  } catch {
+    return null;
+  }
+}
+
+function listComponents(dir) {
+  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();
+}
+
+function extractTags(filePath) {
+  try {
+    const content = readFileSync(filePath, "utf-8");
+    const match = content.match(/\/\/\s*@kind\((\w+)\)/);
+    return match ? match[1] : null;
+  } catch {
+    return null;
+  }
+}

package/src/commands/context.js

@@ -0,0 +1,206 @@
+import { readFileSync, writeFileSync, readdirSync, statSync, existsSync } from "fs";
+import { join, relative, extname, basename, dirname } from "path";
+import { loadConfig } from "../utils/config.js";
+import { lintFile } from "../utils/annotations.js";
+import chalk from "chalk";
+
+const IGNORED_DIRS = new Set([
+  ".git", "node_modules", "dist", "build", ".next", ".gemini",
+  "coverage", ".nyc_output", "__pycache__", ".cache",
+]);
+
+const IGNORED_FILES = new Set([
+  "package-lock.json", "yarn.lock", ".env.local", ".env",
+  "contexto.md", "proyecto_completo.md",
+]);
+
+const IGNORED_EXTENSIONS = new Set([
+  ".png", ".jpg", ".jpeg", ".gif", ".ico", ".svg", ".webp",
+  ".pdf", ".woff", ".woff2", ".ttf", ".eot", ".otf",
+  ".mp4", ".mp3", ".avi", ".mov",
+  ".zip", ".tar", ".gz", ".rar",
+  ".exe", ".dll", ".so", ".dylib",
+  ".db", ".sqlite", ".sqlite3",
+]);
+
+const CODE_EXTENSIONS = new Set([
+  ".ts", ".tsx", ".js", ".jsx", ".json", ".css", ".html",
+  ".md", ".mdx", ".py", ".rs", ".toml", ".yaml", ".yml",
+  ".sh", ".bash", ".zsh", ".env.example",
+]);
+
+function shouldIgnore(name, relPath, isDir) {
+  if (isDir) return IGNORED_DIRS.has(name);
+  if (IGNORED_FILES.has(name)) return true;
+  const ext = extname(name).toLowerCase();
+  if (IGNORED_EXTENSIONS.has(ext)) return true;
+  return false;
+}
+
+function generateTree(dirPath, prefix = "", configIgnore = []) {
+  let treeStr = "";
+  try {
+    const entries = readdirSync(dirPath).sort();
+    const filtered = entries.filter((e) => {
+      if (IGNORED_DIRS.has(e) || IGNORED_FILES.has(e)) return false;
+      if (configIgnore.some((ig) => e.includes(ig))) return false;
+      return true;
+    });
+
+    for (let i = 0; i < filtered.length; i++) {
+      const entry = filtered[i];
+      const fullPath = join(dirPath, entry);
+      const isLast = i === filtered.length - 1;
+      const connector = isLast ? "└── " : "├── ";
+      treeStr += `${prefix}${connector}${entry}\n`;
+
+      if (statSync(fullPath).isDirectory()) {
+        const extension = isLast ? "    " : "│   ";
+        treeStr += generateTree(fullPath, prefix + extension, configIgnore);
+      }
+    }
+  } catch {
+    // PermissionError o similar
+  }
+  return treeStr;
+}
+
+export async function context(options) {
+  const baseDir = process.cwd();
+  const outputFile = options.output || "contexto.md";
+  const config = loadConfig(baseDir);
+  const configIgnores = config.extractor?.ignore || [];
+
+  console.log(chalk.cyan("🔍 Extrayendo contexto del proyecto..."));
+
+  let output = "# Contexto del Proyecto\n\n";
+
+  // Incluir AGENTS.md si existe
+  const agentsPath = join(baseDir, "AGENTS.md");
+  if (existsSync(agentsPath)) {
+    output += "## AGENTS.md (Contexto para IA)\n\n";
+    output += readFileSync(agentsPath, "utf-8") + "\n\n";
+  }
+
+  // Incluir prompt-lang.json si existe
+  const configPath = join(baseDir, "prompt-lang.json");
+  if (existsSync(configPath)) {
+    output += "## prompt-lang.json (Configuración)\n\n";
+    output += "```json\n";
+    output += readFileSync(configPath, "utf-8") + "\n";
+    output += "```\n\n";
+  }
+
+  // Recorrer archivos
+  let fileCount = 0;
+  const walkDir = (dirPath) => {
+    let entries;
+    try {
+      entries = readdirSync(dirPath);
+    } catch {
+      return;
+    }
+
+    for (const entry of entries) {
+      const fullPath = join(dirPath, entry);
+      let stat;
+      try {
+        stat = statSync(fullPath);
+      } catch {
+        continue;
+      }
+
+      if (stat.isDirectory()) {
+        if (!shouldIgnore(entry, relative(baseDir, fullPath), true)) {
+          walkDir(fullPath);
+        }
+        continue;
+      }
+
+      // Ignorar archivos
+      if (shouldIgnore(entry, relative(baseDir, fullPath), false)) continue;
+
+      const ext = extname(entry).toLowerCase();
+      if (!CODE_EXTENSIONS.has(ext)) continue;
+
+      // Ignorar el propio output
+      const relPath = relative(baseDir, fullPath);
+      if (relPath === outputFile) continue;
+
+      // Scope filtering
+      if (options.scope) {
+        try {
+          const content = readFileSync(fullPath, "utf-8");
+          if (!content.includes(`@scope`)) continue;
+          if (!content.includes(`module: ${options.scope}`)) continue;
+        } catch {
+          continue;
+        }
+      }
+
+      fileCount++;
+
+      let content;
+      try {
+        content = readFileSync(fullPath, "utf-8");
+      } catch {
+        continue;
+      }
+
+      // Detectar lenguaje para el bloque de código
+      const langMap = {
+        ".ts": "typescript", ".tsx": "tsx", ".js": "javascript",
+        ".jsx": "jsx", ".json": "json", ".css": "css",
+        ".html": "html", ".md": "markdown", ".mdx": "mdx",
+        ".py": "python", ".rs": "rust", ".toml": "toml",
+        ".yaml": "yaml", ".yml": "yaml", ".sh": "bash",
+      };
+      const lang = langMap[ext] || "";
+
+      output += `### Archivo: ${relPath}\n`;
+      output += `\`\`\`${lang}\n`;
+      output += content;
+      if (!content.endsWith("\n")) output += "\n";
+      output += "```\n\n";
+
+      // Si tiene anotaciones PromptLang, mostrarlas como metadata
+      if (options.ai !== false) {
+        try {
+          const { annotations, errors, warnings } = lintFile(content);
+          if (annotations.length > 0) {
+            output += `*Anotaciones PromptLang:* `;
+            for (const ann of annotations) {
+              output += `\`@${ann.name}`;
+              if (ann.args.length > 0) {
+                const argsStr = ann.args
+                  .map((a) => (a.key ? `${a.key}: ${a.value}` : a.value))
+                  .join(", ");
+                output += `(${argsStr})`;
+              }
+              output += "` ";
+            }
+            output += "\n\n";
+          }
+        } catch {
+          // Ignorar errores de parseo en la extracción
+        }
+      }
+    }
+  };
+
+  walkDir(baseDir);
+
+  // Agregar estructura de carpetas al final
+  output += "# Estructura de Carpetas\n\n";
+  output += "```text\n";
+  output += `${basename(baseDir)}/\n`;
+  output += generateTree(baseDir, "", configIgnores);
+  output += "```\n";
+
+  // Escribir archivo
+  const outputPath = join(baseDir, outputFile);
+  writeFileSync(outputPath, output, "utf-8");
+
+  console.log(chalk.green(`✅ Contexto extraído: ${fileCount} archivos`));
+  console.log(chalk.green(`📄 Output: ${outputFile}`));
+}

package/src/commands/figma.js

@@ -0,0 +1,63 @@
+import { writeFileSync, existsSync, mkdirSync } from "fs";
+import { join } from "path";
+import chalk from "chalk";
+import inquirer from "inquirer";
+import { generateFigmaPrompt } from "../generators/figma-prompt.js";
+
+export async function figma() {
+  console.log(chalk.cyan("\n🎨 Generador de Prompt para Figma\n"));
+
+  const answers = await inquirer.prompt([
+    {
+      type: "list",
+      name: "projectType",
+      message: "Tipo de proyecto:",
+      choices: ["Dashboard SaaS", "Ecommerce", "Landing Page", "Mobile App", "Admin Panel"],
+    },
+    {
+      type: "input",
+      name: "screens",
+      message: "Pantallas principales (separadas por coma):",
+      default: "Login, Dashboard, Profile",
+    },
+    {
+      type: "confirm",
+      name: "mobileFirst",
+      message: "¿Mobile-first?",
+      default: true,
+    },
+    {
+      type: "list",
+      name: "style",
+      message: "Estilo visual:",
+      choices: [
+        "Minimalista corporativo",
+        "Moderno vibrante",
+        "Oscuro (dark mode)",
+        "Claro y limpio",
+        "Personalizado",
+      ],
+    },
+    {
+      type: "confirm",
+      name: "includeAntiPatterns",
+      message: "¿Incluir anti-patrones a evitar?",
+      default: true,
+    },
+  ]);
+
+  const promptContent = generateFigmaPrompt(answers);
+
+  // Guardar en docs/PROMPTS/
+  const promptsDir = join(process.cwd(), "docs", "PROMPTS");
+  if (!existsSync(promptsDir)) {
+    mkdirSync(promptsDir, { recursive: true });
+  }
+
+  const outputPath = join(promptsDir, "figma-prompt.md");
+  writeFileSync(outputPath, promptContent, "utf-8");
+
+  console.log(chalk.green(`\n✅ Prompt Figma generado:`));
+  console.log(chalk.cyan(`   ${outputPath}\n`));
+  console.log(promptContent);
+}