mycontext-cli 0.4.8 → 0.4.10

package/dist/commands/generate-components.js

@@ -79,7 +79,14 @@ class GenerateComponentsCommand {
     }
     getComponentBaseName(component) {
         const raw = typeof component === "string" ? component : component?.name;
-        return this.generateComponentName(String(raw || "Component"));
+        const name = String(raw || "Component");
+        // Simple PascalCase conversion - no template generation
+        return name
+            .replace(/[_-]+/g, " ")
+            .split(/\s+/)
+            .map((w) => w ? w.charAt(0).toUpperCase() + w.slice(1).toLowerCase() : "")
+            .join("")
+            .replace(/[^A-Za-z0-9]/g, "");
     }
     getComponentExportName(component) {
         return this.getComponentBaseName(component);
@@ -628,34 +635,13 @@ class GenerateComponentsCommand {
                             },
                         },
                     }),
-                    new Promise((_, reject) => setTimeout(() => reject(new Error("Code generation timed out after 60 seconds")), 60000)),
+                    new Promise((_, reject) => setTimeout(() => reject(new Error("Code generation timed out after 30 minutes")), 1800000)),
                 ]));
             }
             catch (error) {
-                if (error.message.includes("timed out")) {
-                    console.log(chalk_1.default.yellow(`⚠️  Code generation timed out for ${component.name}`));
-                    console.log(chalk_1.default.gray("Using fallback generation method..."));
-                    const code = this.generateComponentCode(component, group, options);
-                    const fileBase = this.getComponentBaseName(component);
-                    const componentPath = path.join(groupDir, `${fileBase}.tsx`);
-                    await this.fs.writeFile(componentPath, code);
-                    // Store component with fallback data
-                    await this.storeComponent({
-                        userId,
-                        name: component.name,
-                        code,
-                        metadata: {
-                            prompt: component.description || "",
-                            model: "fallback-timeout",
-                            executionTime: Date.now(),
-                            qualityScore: null,
-                            group: group.name,
-                        },
-                        group: group.name,
-                        qualityScore: null,
-                    });
-                    return;
-                }
+                // No fallbacks - propagate the error for clean failure
+                console.log(chalk_1.default.red(`❌ AI generation failed for ${component.name}: ${error.message}`));
+                console.log(chalk_1.default.yellow(`💡 No generic templates - retry when AI is available!`));
                 throw error;
             }
             const fileBase = this.getComponentBaseName(component);
@@ -1068,363 +1054,10 @@ class GenerateComponentsCommand {
             }
         }
     }
-    generateComponentCode(component, group, options) {
-        // Handle both string and object inputs
-        let name, description, type, userStories, actionFunctions, dependencies, tags;
-        if (typeof component === "string") {
-            // Simple string input - create a basic component structure
-            name = this.generateComponentName(component);
-            description = component;
-            type = "form"; // Default type
-            userStories = [
-                `As a user, I want to use ${name} to ${component.toLowerCase()}`,
-            ];
-            actionFunctions = ["handleSubmit", "handleChange"];
-            dependencies = ["react", "tailwindcss"];
-            tags = ["ui", "component"];
-        }
-        else {
-            // Structured component object
-            const rawName = String(component?.name || "Component");
-            name = this.generateComponentName(rawName);
-            description = String(component?.description || "");
-            type = String(component?.type || "form");
-            userStories = Array.isArray(component?.userStories)
-                ? component.userStories
-                : [];
-            actionFunctions = Array.isArray(component?.actionFunctions)
-                ? component.actionFunctions
-                : [];
-            dependencies = Array.isArray(component?.dependencies)
-                ? component.dependencies
-                : [];
-            tags = Array.isArray(component?.tags) ? component.tags : [];
-        }
-        // Ensure robust defaults for template rendering
-        if (!Array.isArray(userStories))
-            userStories = [];
-        if (!Array.isArray(actionFunctions))
-            actionFunctions = [];
-        if (!Array.isArray(dependencies))
-            dependencies = [];
-        if (!Array.isArray(tags))
-            tags = [];
-        type = String(type || "form");
-        // Read branding for styling
-        const brandingPath = "context/branding.json";
-        let branding = {};
-        try {
-            if (fs.existsSync(brandingPath)) {
-                branding = JSON.parse(fs.readFileSync(brandingPath, "utf8"));
-            }
-        }
-        catch (error) {
-            // Use default branding if file doesn't exist
-        }
-        const planned = this.findComponentPlan(group?.name || "", name) || {};
-        const plannedContext = Array.isArray(planned?.acceptanceCriteria)
-            ? planned.acceptanceCriteria
-                .slice(0, 5)
-                .map((s) => ` * - ${String(s)}`)
-                .join("\n")
-            : "";
-        const prdContext = options?.context?.prd || "";
-        const typesContext = options?.context?.types || "";
-        return `"use client";
-
-import React from "react";
-import { cn } from "@/lib/utils";
-import { Card, CardHeader, CardTitle, CardContent } from "@/components/ui/card";
-import { Button } from "@/components/ui/button";
-
-/**
- * ${name} Component
- * 
- * ${description}
- * 
- * User Stories:
-${userStories.map((story) => ` * - ${story}`).join("\n")}
- * 
- * Action Functions:
-${actionFunctions.map((func) => ` * - ${func}`).join("\n")}
- * 
- * Dependencies: ${dependencies.join(", ")}
- * Tags: ${tags.join(", ")}
- *
- * Context Snapshot (PRD excerpt):
- * ${prdContext
-            .split("\n")
-            .slice(0, 5)
-            .map((l) => ` * ${l}`)
-            .join("\n")}
- *
- * Types Snapshot (excerpt):
- * ${typesContext
-            .split("\n")
-            .slice(0, 5)
-            .map((l) => ` * ${l}`)
-            .join("\n")}
- *
- * Planned Acceptance Criteria:
-${plannedContext || " * - (none)"}
- */
-
-interface ${name}Props {
-  className?: string;
-  // Add specific props based on component type
-  ${this.generatePropsForType(type)}
-}
-
-export function ${name}({ 
-  className,
-  ${this.generatePropsDestructuring(type)}
-  ...props 
-}: ${name}Props) {
-  ${this.generateComponentLogic(type, actionFunctions)}
-
-  return (
-    <Card className={cn("${this.generateBaseClasses(type, branding)}", className)} {...props}>
-      <CardHeader>
-        <CardTitle>${name}</CardTitle>
-      </CardHeader>
-      <CardContent>
-        ${this.generateComponentJSX(type, name)}
-      </CardContent>
-    </Card>
-  );
-}
-
-${this.generateActionFunctions(actionFunctions, name)}
-
-export default ${name};
-`;
-    }
-    generateComponentName(description) {
-        // Preserve existing PascalCase names; otherwise convert to PascalCase
-        const trimmed = description.trim();
-        if (/^[A-Z][A-Za-z0-9]*$/.test(trimmed))
-            return trimmed;
-        return trimmed
-            .replace(/[_-]+/g, " ")
-            .split(/\s+/)
-            .map((w) => w ? w.charAt(0).toUpperCase() + w.slice(1).toLowerCase() : "")
-            .join("")
-            .replace(/[^A-Za-z0-9]/g, "");
-    }
-    generatePropsForType(type) {
-        switch (type) {
-            case "form":
-                return `
-  onSubmit?: (data: any) => void;
-  loading?: boolean;
-  error?: string;`;
-            case "layout":
-                return `
-  children: React.ReactNode;
-  sidebar?: React.ReactNode;`;
-            case "card":
-                return `
-  title?: string;
-  content?: React.ReactNode;
-  actions?: React.ReactNode;`;
-            case "button":
-                return `
-  variant?: "default" | "destructive" | "outline" | "secondary" | "ghost" | "link";
-  size?: "default" | "sm" | "lg" | "icon";
-  disabled?: boolean;
-  onClick?: () => void;`;
-            default:
-                return `
-  // Add component-specific props here`;
-        }
-    }
-    generatePropsDestructuring(type) {
-        switch (type) {
-            case "form":
-                return `
-  onSubmit,
-  loading = false,
-  error,`;
-            case "layout":
-                return `
-  children,
-  sidebar,`;
-            case "card":
-                return `
-  title,
-  content,
-  actions,`;
-            case "button":
-                return `
-  variant = "default",
-  size = "default",
-  disabled = false,
-  onClick,`;
-            default:
-                return "";
-        }
-    }
-    generateComponentLogic(type, actionFunctions) {
-        const logic = [];
-        if (type === "form") {
-            logic.push(`
-  const [formData, setFormData] = React.useState({});
-  const [isSubmitting, setIsSubmitting] = React.useState(false);`);
-        }
-        if (type === "form") {
-            logic.push(`
-  const handleSubmit = async (e: React.FormEvent) => {
-    e.preventDefault();
-    setIsSubmitting(true);
-    try {
-      onSubmit?.(formData);
-    } catch (error) {
-      console.error("Form submission error:", error);
-    } finally {
-      setIsSubmitting(false);
-    }
-  };`);
-        }
-        return logic.join("\n");
-    }
-    generateBaseClasses(type, branding) {
-        const baseClasses = [];
-        // Normalize and sanitize type
-        const normalizedType = String(type || "")
-            .toLowerCase()
-            .replace(/\s+/g, "-");
-        switch (normalizedType) {
-            case "form":
-                baseClasses.push("space-y-4", "w-full", "max-w-md");
-                break;
-            case "layout":
-                baseClasses.push("min-h-screen", "flex", "flex-col");
-                break;
-            case "card":
-                baseClasses.push("rounded-lg", "border", "bg-card", "p-6", "shadow-sm");
-                break;
-            case "button":
-                baseClasses.push("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-ring", "focus-visible:ring-offset-2", "disabled:opacity-50", "disabled:pointer-events-none");
-                break;
-            default:
-                baseClasses.push("w-full");
-        }
-        return baseClasses.join(" ");
-    }
-    generateComponentJSX(type, name) {
-        const normalizedType = String(type || "")
-            .toLowerCase()
-            .replace(/\s+/g, "-");
-        switch (normalizedType) {
-            case "form":
-                return `
-      {/* Example domain-agnostic form scaffold. Replace fields per component plan. */}
-      <form onSubmit={handleSubmit} className="space-y-4">
-        <div className="space-y-2">
-          <label htmlFor="field1" className="text-sm font-medium">Field 1</label>
-          <input id="field1" className="flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50" placeholder="Type here" />
-        </div>
-        {error ? <div className="text-sm text-destructive">{error}</div> : null}
-        <button
-          type="submit"
-          disabled={loading || isSubmitting}
-          className="inline-flex h-10 items-center justify-center rounded-md bg-primary px-4 py-2 text-sm font-medium text-primary-foreground ring-offset-background transition-colors hover:bg-primary/90 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50"
-        >
-          {loading || isSubmitting ? "Submitting..." : "Submit"}
-        </button>
-      </form>`;
-            case "layout":
-                return `
-      <header className="border-b bg-background">
-        <div className="container mx-auto px-4 py-4">
-          <h1 className="text-2xl font-bold">${name}</h1>
-        </div>
-      </header>
-      <main className="flex-1">
-        <div className="container mx-auto px-4 py-8">
-          {children}
-        </div>
-      </main>
-      <footer className="border-t bg-background">
-        <div className="container mx-auto px-4 py-4 text-center text-sm text-muted-foreground">
-          © 2024 MyContext. All rights reserved.
-        </div>
-      </footer>`;
-            case "card":
-                return `
-      {title && (
-        <h3 className="text-lg font-semibold leading-none tracking-tight">
-          {title}
-        </h3>
-      )}
-      {content && (
-        <div className="mt-4">
-          {content}
-        </div>
-      )}
-      {actions && (
-        <div className="mt-4 flex justify-end space-x-2">
-          {actions}
-        </div>
-      )}`;
-            case "button":
-                return `
-      <span className="sr-only">${name}</span>
-      <span>${name}</span>`;
-            default:
-                return `
-      <div className="p-4">
-        <h3 className="text-lg font-semibold">${name}</h3>
-        <p className="text-sm text-muted-foreground">
-          This is a ${type} component. Customize it based on your needs.
-        </p>
-      </div>`;
-        }
-    }
-    generateActionFunctions(actionFunctions, componentName) {
-        if (actionFunctions.length === 0)
-            return "";
-        const functions = actionFunctions.map((func) => {
-            switch (func) {
-                case "handleSubmit":
-                    return `// Already implemented in component logic`;
-                case "handleLogin":
-                    return `
-export async function handleLogin(email: string, password: string) {
-  // Implement login logic in application layer
-  console.log("Logging in with:", { email, password });
-  return { success: true };
-}`;
-                case "handleSignup":
-                    return `
-export async function handleSignup(email: string, password: string, name: string) {
-  // Implement signup logic in application layer
-  console.log("Signing up with:", { email, password, name });
-  return { success: true };
-}`;
-                case "validateEmail":
-                    return `
-export function validateEmail(email: string): boolean {
-  const emailRegex = /^[^\\s@]+@[^\\s@]+\\.[^\\s@]+$/;
-  return emailRegex.test(email);
-}`;
-                case "checkUsername":
-                    return `
-export async function checkUsername(username: string): Promise<boolean> {
-  // Implement username availability check in application layer
-  console.log("Checking username:", username);
-  return true;
-}`;
-                default:
-                    return `
-export function ${func}() {
-  // Implement ${func} logic in application layer
-  console.log("${func} called");
-}`;
-            }
-        });
-        return functions.join("\n");
-    }
+    // REMOVED: All generic template generation
+    // Components are now 100% generated by AI using context files and sub-agents
+    // REMOVED: Template generation methods
+    // All components now generated by AI with context analysis
     async generateGroupIndex(group, groupDir) {
         const components = group.components || [];
         const exports = components.map((comp) => {
@@ -1461,7 +1094,12 @@ ${components
         })
             .join("\n")}
 
-export default function ${this.generateComponentName(String(group.name || "Group"))}Preview() {
+export default function ${String(group.name || "Group")
+            .replace(/[_-]+/g, " ")
+            .split(/\s+/)
+            .map((w) => w ? w.charAt(0).toUpperCase() + w.slice(1).toLowerCase() : "")
+            .join("")
+            .replace(/[^A-Za-z0-9]/g, "")}Preview() {
   return (
     <div className="container mx-auto p-8 space-y-8">
       <div className="text-center">
@@ -1527,7 +1165,7 @@ import { previewProps } from './preview-props';
 
 export type PreviewRegistryItem = {
   group: string;
-  name: string;
+  name: string; 
   path: string;
   loader: () => Promise<any>;
 };