mycontext-cli 0.1.0

package/dist/cli/src/commands/generate-components.js

@@ -0,0 +1,680 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.GenerateComponentsCommand = void 0;
+const fileSystem_1 = require("../utils/fileSystem");
+const spinner_1 = require("../utils/spinner");
+const chalk_1 = __importDefault(require("chalk"));
+const fs = __importStar(require("fs-extra"));
+const path = __importStar(require("path"));
+// Code Generation Sub-Agent
+class CodeGenSubAgent {
+    constructor() {
+        this.name = "CodeGenSubAgent";
+    }
+    async run({ component, group, options }) {
+        // Use the existing generateComponentCode logic
+        return new GenerateComponentsCommand().generateComponentCode(component, group, options);
+    }
+}
+// QA Sub-Agent (stub for demonstration)
+class QASubAgent {
+    constructor() {
+        this.name = "QASubAgent";
+    }
+    async run({ code, component }) {
+        // Placeholder: In real implementation, run static analysis, lint, or type checks
+        // For now, always return true (pass)
+        return true;
+    }
+}
+// Docs Writer Sub-Agent (stub for demonstration)
+class DocsSubAgent {
+    constructor() {
+        this.name = "DocsSubAgent";
+    }
+    async run({ component, group }) {
+        // Placeholder: Generate markdown or JSDoc for the component
+        return `# ${component.name}\n\n${component.description}\n`;
+    }
+}
+// --- Orchestration in GenerateComponentsCommand ---
+class GenerateComponentsCommand {
+    constructor() {
+        this.fs = new fileSystem_1.FileSystemManager();
+    }
+    async execute(target, options) {
+        const spinner = new spinner_1.EnhancedSpinner("Initializing component generation...");
+        try {
+            // Check authentication first
+            const { AuthCommand } = await Promise.resolve().then(() => __importStar(require("./auth")));
+            const authCommand = new AuthCommand();
+            if (!(await authCommand.requireAuth())) {
+                console.log(chalk_1.default.yellow("🔐 Authentication required"));
+                console.log(chalk_1.default.gray("Please run 'mycontext auth' to authenticate first"));
+                return;
+            }
+            // Get user info for component storage
+            const userInfo = await authCommand.getUserInfo();
+            if (!userInfo) {
+                console.log(chalk_1.default.red("❌ Authentication failed"));
+                return;
+            }
+            console.log(chalk_1.default.green(`✅ Authenticated as ${userInfo.email}`));
+            // Determine if we're generating a specific group or all components
+            const isAll = target === "all" || options.all;
+            const groupName = isAll ? undefined : target;
+            if (isAll) {
+                await this.generateAllComponents(options, spinner, userInfo.userId);
+            }
+            else if (groupName) {
+                await this.generateComponentGroup(groupName, options, spinner, userInfo.userId);
+            }
+            else {
+                throw new Error("Please specify a group name or 'all' to generate components");
+            }
+        }
+        catch (error) {
+            spinner.error({ text: "Component generation failed" });
+            throw error;
+        }
+    }
+    async generateAllComponents(options, spinner, userId) {
+        spinner.updateText("Generating all component groups...");
+        // Read component list
+        const componentListPath = "context/component-list.json";
+        if (!(await this.fs.exists(componentListPath))) {
+            throw new Error("Component list not found. Run 'mycontext generate components-list' first.");
+        }
+        const componentList = JSON.parse(await this.fs.readFile(componentListPath));
+        const groups = componentList.groups || [];
+        if (groups.length === 0) {
+            throw new Error("No component groups found in component-list.json");
+        }
+        // Create components directory
+        const componentsDir = options.output || "components";
+        await this.fs.ensureDir(componentsDir);
+        let totalComponents = 0;
+        let generatedGroups = 0;
+        for (const group of groups) {
+            spinner.updateText(`Generating ${group.name} components...`);
+            const groupDir = path.join(componentsDir, group.name.toLowerCase());
+            await this.fs.ensureDir(groupDir);
+            const components = group.components || [];
+            for (const component of components) {
+                await this.generateComponent(component, group, groupDir, options, userId);
+                totalComponents++;
+            }
+            // Generate group index file
+            await this.generateGroupIndex(group, groupDir);
+            // Generate preview page
+            await this.generatePreviewPage(group, groupDir);
+            generatedGroups++;
+        }
+        spinner.success({
+            text: `Generated ${totalComponents} components across ${generatedGroups} groups!`,
+        });
+        console.log(chalk_1.default.green("\n✅ Generated Files:"));
+        console.log(chalk_1.default.gray(`  • ${componentsDir}/`));
+        groups.forEach((group) => {
+            console.log(chalk_1.default.gray(`    • ${group.name.toLowerCase()}/`));
+            const components = group.components || [];
+            components.forEach((comp) => {
+                console.log(chalk_1.default.gray(`      • ${comp.name}.tsx`));
+            });
+            console.log(chalk_1.default.gray(`      • index.ts`));
+            console.log(chalk_1.default.gray(`      • page.tsx`));
+        });
+    }
+    async generateComponentGroup(groupName, options, spinner, userId) {
+        spinner.updateText(`Generating ${groupName} components...`);
+        // Read component list
+        const componentListPath = "context/component-list.json";
+        if (!(await this.fs.exists(componentListPath))) {
+            throw new Error("Component list not found. Run 'mycontext generate components-list' first.");
+        }
+        const componentList = JSON.parse(await this.fs.readFile(componentListPath));
+        const groups = componentList.groups || [];
+        const group = groups.find((g) => g.name.toLowerCase() === groupName.toLowerCase());
+        if (!group) {
+            throw new Error(`Group '${groupName}' not found in component-list.json`);
+        }
+        // Create group directory
+        const componentsDir = options.output || "components";
+        const groupDir = path.join(componentsDir, group.name.toLowerCase());
+        await this.fs.ensureDir(groupDir);
+        const components = group.components || [];
+        for (const component of components) {
+            await this.generateComponent(component, group, groupDir, options, userId);
+        }
+        // Generate group index file
+        await this.generateGroupIndex(group, groupDir);
+        // Generate preview page
+        await this.generatePreviewPage(group, groupDir);
+        spinner.success({
+            text: `Generated ${components.length} components in ${group.name}!`,
+        });
+        console.log(chalk_1.default.green("\n✅ Generated Files:"));
+        console.log(chalk_1.default.gray(`  • ${groupDir}/`));
+        components.forEach((comp) => {
+            console.log(chalk_1.default.gray(`    • ${comp.name}.tsx`));
+        });
+        console.log(chalk_1.default.gray(`    • index.ts`));
+        console.log(chalk_1.default.gray(`    • page.tsx`));
+    }
+    async generateComponent(component, group, groupDir, options, userId) {
+        try {
+            // Use sub-agent orchestration for component generation
+            const { orchestrator } = await Promise.resolve().then(() => __importStar(require("../agents/orchestrator/SubAgentOrchestrator")));
+            // Execute code generation first
+            const codeResult = (await orchestrator.executeAgent("CodeGenSubAgent", {
+                component,
+                group,
+                options: {
+                    ...options,
+                    useXAI: options.useXAI || false,
+                },
+            }));
+            const componentPath = path.join(groupDir, `${component.name}.tsx`);
+            await this.fs.writeFile(componentPath, codeResult.code);
+            // Execute QA and docs in parallel
+            const [qaResult, docsResult] = (await Promise.all([
+                orchestrator.executeAgent("QASubAgent", {
+                    code: codeResult.code,
+                    component,
+                    standards: ["typescript", "react", "accessibility"],
+                }),
+                orchestrator.executeAgent("DocsSubAgent", {
+                    code: codeResult.code,
+                    component,
+                    format: "readme",
+                }),
+            ]));
+            // Write documentation
+            const docsPath = path.join(groupDir, `${component.name}.md`);
+            await this.fs.writeFile(docsPath, docsResult.content);
+            // Log QA results
+            if (qaResult.score < 70) {
+                console.log(chalk_1.default.yellow(`⚠️  QA Score for ${component.name}: ${qaResult.score}/100`));
+                if (qaResult.issues.length > 0) {
+                    console.log(chalk_1.default.gray(`  Issues found: ${qaResult.issues.length}`));
+                }
+            }
+            else {
+                console.log(chalk_1.default.green(`✅ QA Score for ${component.name}: ${qaResult.score}/100`));
+            }
+            // Store component in InstantDB
+            await this.storeComponent({
+                userId,
+                name: component.name,
+                code: codeResult.code,
+                metadata: {
+                    prompt: component.description || "",
+                    model: "claude-sonnet",
+                    executionTime: Date.now(),
+                    qualityScore: qaResult.score,
+                    group: group.name,
+                    dependencies: codeResult.metadata?.dependencies || [],
+                    tags: codeResult.metadata?.tags || [],
+                },
+                group: group.name,
+                qualityScore: qaResult.score,
+            });
+        }
+        catch (error) {
+            // Fallback to original method if sub-agent system fails
+            console.log(chalk_1.default.yellow(`⚠️  Sub-agent system failed for ${component.name}, using fallback method`));
+            const code = this.generateComponentCode(component, group, options);
+            const componentPath = path.join(groupDir, `${component.name}.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",
+                    executionTime: Date.now(),
+                    qualityScore: null,
+                    group: group.name,
+                },
+                group: group.name,
+                qualityScore: null,
+            });
+        }
+    }
+    async storeComponent(componentData) {
+        try {
+            const response = await fetch("http://localhost:3000/api/components/store", {
+                method: "POST",
+                headers: {
+                    "Content-Type": "application/json",
+                },
+                body: JSON.stringify(componentData),
+            });
+            const result = (await response.json());
+            if (result.success) {
+                console.log(chalk_1.default.green(`💾 Component stored: ${componentData.name}`));
+            }
+            else {
+                console.log(chalk_1.default.yellow(`⚠️  Failed to store component: ${result.error}`));
+            }
+        }
+        catch (error) {
+            console.log(chalk_1.default.yellow(`⚠️  Component storage failed: ${error}`));
+        }
+    }
+    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
+            ({
+                name,
+                description,
+                type,
+                userStories,
+                actionFunctions,
+                dependencies,
+                tags,
+            } = component);
+        }
+        // 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
+        }
+        return `"use client";
+
+import React from "react";
+import { cn } from "@/lib/utils";
+
+/**
+ * ${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(", ")}
+ */
+
+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 (
+    <div className={cn("${this.generateBaseClasses(type, branding)}", className)} {...props}>
+      ${this.generateComponentJSX(type, name)}
+    </div>
+  );
+}
+
+${this.generateActionFunctions(actionFunctions, name)}
+
+export default ${name};
+`;
+    }
+    generateComponentName(description) {
+        // Convert description to PascalCase component name
+        return description
+            .split(" ")
+            .map((word) => word.charAt(0).toUpperCase() + word.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 {
+      // TODO: Implement form submission logic
+      onSubmit?.(formData);
+    } catch (error) {
+      console.error("Form submission error:", error);
+    } finally {
+      setIsSubmitting(false);
+    }
+  };`);
+        }
+        return logic.join("\n");
+    }
+    generateBaseClasses(type, branding) {
+        const baseClasses = [];
+        switch (type) {
+            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) {
+        switch (type) {
+            case "form":
+                return `
+      <form onSubmit={handleSubmit} className="space-y-4">
+        <div className="space-y-2">
+          <label htmlFor="email" className="text-sm font-medium">
+            Email
+          </label>
+          <input
+            id="email"
+            type="email"
+            className="flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground 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="Enter your email"
+            required
+          />
+        </div>
+        <div className="space-y-2">
+          <label htmlFor="password" className="text-sm font-medium">
+            Password
+          </label>
+          <input
+            id="password"
+            type="password"
+            className="flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground 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="Enter your password"
+            required
+          />
+        </div>
+        {error && (
+          <div className="text-sm text-destructive">
+            {error}
+          </div>
+        )}
+        <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 ? "Loading..." : "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) {
+  // TODO: Implement login logic
+  console.log("Logging in with:", { email, password });
+  return { success: true };
+}`;
+                case "handleSignup":
+                    return `
+export async function handleSignup(email: string, password: string, name: string) {
+  // TODO: Implement signup logic
+  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> {
+  // TODO: Implement username availability check
+  console.log("Checking username:", username);
+  return true;
+}`;
+                default:
+                    return `
+export function ${func}() {
+  // TODO: Implement ${func} logic
+  console.log("${func} called");
+}`;
+            }
+        });
+        return functions.join("\n");
+    }
+    async generateGroupIndex(group, groupDir) {
+        const components = group.components || [];
+        const exports = components.map((comp) => `export { ${comp.name} } from "./${comp.name}";`);
+        const indexContent = `/**
+ * ${group.name} Components
+ * 
+ * ${group.description}
+ * 
+ * Generated components: ${components.length}
+ */
+
+${exports.join("\n")}
+
+// Re-export default exports
+${components
+            .map((comp) => `export { default as ${comp.name}Default } from "./${comp.name}";`)
+            .join("\n")}
+`;
+        await this.fs.writeFile(path.join(groupDir, "index.ts"), indexContent);
+    }
+    async generatePreviewPage(group, groupDir) {
+        const components = group.components || [];
+        const previewContent = `import React from "react";
+${components
+            .map((comp) => `import { ${comp.name} } from "./${comp.name}";`)
+            .join("\n")}
+
+export default function ${group.name}Preview() {
+  return (
+    <div className="container mx-auto p-8 space-y-8">
+      <div className="text-center">
+        <h1 className="text-3xl font-bold mb-2">${group.name} Components</h1>
+        <p className="text-muted-foreground">${group.description}</p>
+      </div>
+
+      <div className="grid gap-8">
+${components
+            .map((comp) => `
+        <section className="space-y-4">
+          <h2 className="text-2xl font-semibold">${comp.name}</h2>
+          <p className="text-muted-foreground">${comp.description}</p>
+          <div className="border rounded-lg p-6 bg-card">
+            <${comp.name} />
+          </div>
+        </section>`)
+            .join("\n")}
+      </div>
+    </div>
+  );
+}
+`;
+        await this.fs.writeFile(path.join(groupDir, "page.tsx"), previewContent);
+    }
+}
+exports.GenerateComponentsCommand = GenerateComponentsCommand;
+//# sourceMappingURL=generate-components.js.map