ebade 0.2.2 → 0.4.0

package/packages/mcp-server/src/tools/scaffold.ts

@@ -1,7 +1,7 @@
 /**
  * Scaffold Tool
  *
- * Creates a complete project structure from an intent definition.
+ * v0.3.1 - Integrated with standard ebade templates
  */
 
 import fs from "fs";
@@ -10,465 +10,214 @@ import yaml from "yaml";
 
 interface ScaffoldArgs {
   projectName: string;
-  projectType: string;
-  features?: string[];
+  projectType:
+    | "SaaS Dashboard"
+    | "E-commerce"
+    | "Landing Page"
+    | "Empty Project";
+  primaryColor?: string;
   outputDir: string;
 }
 
-// Project type templates
-const projectTemplates: Record<string, any> = {
-  "e-commerce": {
+const TEMPLATES: Record<string, any> = {
+  "SaaS Dashboard": {
+    features: ["user-auth", "billing", "analytics", "team-management"],
     pages: [
       {
         path: "/",
         intent: "landing-page",
-        components: ["hero-section", "featured-products", "testimonials"],
-      },
-      {
-        path: "/products",
-        intent: "product-listing",
-        components: ["search-bar", "filter-sidebar", "product-grid"],
-      },
-      {
-        path: "/products/[slug]",
-        intent: "product-detail",
-        components: [
-          "product-gallery",
-          "product-info",
-          "add-to-cart",
-          "reviews",
-        ],
-      },
-      {
-        path: "/cart",
-        intent: "shopping-cart",
-        components: ["cart-items", "cart-summary", "checkout-cta"],
-      },
-      {
-        path: "/checkout",
-        intent: "checkout-flow",
-        auth: "required",
-        components: ["checkout-form", "payment-section", "order-summary"],
-      },
-    ],
-    data: {
-      Product: {
-        fields: {
-          id: { type: "uuid", required: true },
-          name: { type: "string", required: true },
-          price: { type: "decimal", required: true },
-          images: { type: "array" },
-          category: { type: "string" },
-          stock: { type: "integer" },
-        },
-      },
-      Cart: {
-        fields: {
-          id: { type: "uuid", required: true },
-          items: { type: "array", required: true },
-          total: { type: "decimal", required: true },
-        },
-      },
-    },
-  },
-  "saas-dashboard": {
-    pages: [
-      {
-        path: "/",
-        intent: "landing-page",
-        components: ["hero", "features", "pricing", "cta"],
+        components: ["hero", "features", "pricing"],
       },
       {
         path: "/dashboard",
-        intent: "dashboard",
+        intent: "main-dashboard",
         auth: "required",
-        components: ["stats-cards", "chart-section", "recent-activity"],
+        components: ["stats-grid", "activity-chart"],
       },
       {
         path: "/settings",
-        intent: "settings",
+        intent: "user-settings",
         auth: "required",
-        components: ["profile-form", "security-settings", "billing-section"],
+        components: ["profile-form", "security"],
       },
     ],
-    data: {
-      User: {
-        fields: {
-          id: { type: "uuid", required: true },
-          email: { type: "string", required: true, unique: true },
-          name: { type: "string", required: true },
-          plan: { type: "enum" },
-        },
-      },
-    },
+    design: { style: "modern-glassmorphism", borderRadius: "xl" },
   },
-  blog: {
+  "E-commerce": {
+    features: ["product-catalog", "shopping-cart", "checkout", "search"],
     pages: [
       {
         path: "/",
-        intent: "blog-home",
-        components: ["featured-post", "post-grid", "newsletter"],
+        intent: "home-page",
+        components: ["hero-section", "product-grid"],
       },
       {
-        path: "/posts",
-        intent: "post-listing",
-        components: ["post-list", "search", "categories"],
+        path: "/cart",
+        intent: "shopping-cart",
+        components: ["cart-list", "checkout-cta"],
       },
       {
-        path: "/posts/[slug]",
-        intent: "post-detail",
-        components: ["post-content", "author-bio", "comments", "related-posts"],
+        path: "/checkout",
+        intent: "checkout-flow",
+        auth: "required",
+        components: ["payment-form"],
       },
     ],
-    data: {
-      Post: {
-        fields: {
-          id: { type: "uuid", required: true },
-          title: { type: "string", required: true },
-          slug: { type: "string", required: true, unique: true },
-          content: { type: "text", required: true },
-          publishedAt: { type: "timestamp" },
-        },
-      },
-    },
+    design: { style: "clean-minimal", borderRadius: "md" },
   },
-  "landing-page": {
+  "Landing Page": {
+    features: ["hero", "features", "testimonials", "cta", "footer"],
     pages: [
       {
         path: "/",
-        intent: "landing",
+        intent: "landing-page",
         components: [
           "hero",
-          "features",
-          "testimonials",
-          "pricing",
-          "faq",
-          "cta",
-          "footer",
+          "feature-grid",
+          "testimonial-slider",
+          "cta-section",
         ],
       },
     ],
-    data: {},
+    design: { style: "premium-dark", borderRadius: "full" },
   },
-  portfolio: {
-    pages: [
-      {
-        path: "/",
-        intent: "portfolio-home",
-        components: ["hero", "about", "projects-grid", "skills", "contact"],
-      },
-      {
-        path: "/projects/[slug]",
-        intent: "project-detail",
-        components: ["project-gallery", "project-info", "tech-stack"],
-      },
-    ],
-    data: {
-      Project: {
-        fields: {
-          id: { type: "uuid", required: true },
-          title: { type: "string", required: true },
-          description: { type: "text" },
-          images: { type: "array" },
-          link: { type: "string" },
-        },
-      },
-    },
-  },
-};
-
-// Component templates
-const componentTemplates: Record<string, (name: string) => string> = {
-  default: (name: string) => {
-    const pascalName = name
-      .split("-")
-      .map((w) => w.charAt(0).toUpperCase() + w.slice(1))
-      .join("");
-    return `"use client";
-
-import { useState } from "react";
-
-interface ${pascalName}Props {
-  className?: string;
-}
-
-export function ${pascalName}({ className }: ${pascalName}Props) {
-  return (
-    <section className={\`${name} \${className || ""}\`}>
-      <div className="container">
-        {/* ${pascalName} content */}
-        <h2>${pascalName}</h2>
-      </div>
-    </section>
-  );
-}
-`;
+  "Empty Project": {
+    features: [],
+    pages: [{ path: "/", intent: "index", components: ["welcome"] }],
+    design: { style: "minimal", borderRadius: "md" },
   },
 };
 
-// Page template
-function generatePageTemplate(page: any): string {
-  const componentImports = (page.components || [])
-    .map((c: string) => {
-      const pascalName = c
-        .split("-")
-        .map((w: string) => w.charAt(0).toUpperCase() + w.slice(1))
-        .join("");
-      return `import { ${pascalName} } from "@/components/${c}";`;
-    })
-    .join("\n");
+export async function scaffoldProject(args: ScaffoldArgs): Promise<string> {
+  const {
+    projectName,
+    projectType,
+    primaryColor = "#6366f1",
+    outputDir,
+  } = args;
 
-  const componentUsage = (page.components || [])
-    .map((c: string) => {
-      const pascalName = c
-        .split("-")
-        .map((w: string) => w.charAt(0).toUpperCase() + w.slice(1))
-        .join("");
-      return `      <${pascalName} />`;
-    })
-    .join("\n");
-
-  const pageName = page.intent
-    .split("-")
-    .map((w: string) => w.charAt(0).toUpperCase() + w.slice(1))
-    .join("");
-
-  return `/**
- * @page('${page.path}')
- * @ebade('${page.intent}')
- * ${page.auth ? `@requires({ auth: '${page.auth}' })` : ""}
- */
-
-${componentImports}
-
-export default function ${pageName}Page() {
-  return (
-    <main className="page ${page.intent}">
-${componentUsage}
-    </main>
-  );
-}
-`;
-}
+  const template = TEMPLATES[projectType];
+  const projectDir = path.join(outputDir, projectName);
 
-// Generate package.json
-function generatePackageJson(projectName: string, projectType: string): string {
-  return JSON.stringify(
-    {
+  try {
+    // 1. Create directory structure
+    const dirs = [
+      "app/api",
+      "components",
+      "lib",
+      "styles",
+      "public",
+      "types",
+      "database",
+    ];
+    if (!fs.existsSync(projectDir))
+      fs.mkdirSync(projectDir, { recursive: true });
+
+    dirs.forEach((d) => {
+      const fullPath = path.join(projectDir, d);
+      if (!fs.existsSync(fullPath)) fs.mkdirSync(fullPath, { recursive: true });
+    });
+
+    // 2. Generate ebade file
+    const ebadeConfig = {
       name: projectName,
-      version: "0.1.0",
-      private: true,
-      scripts: {
-        dev: "next dev",
-        build: "next build",
-        start: "next start",
-        lint: "next lint",
-      },
-      dependencies: {
-        next: "^14.0.0",
-        react: "^18.2.0",
-        "react-dom": "^18.2.0",
-      },
-      devDependencies: {
-        "@types/node": "^20.0.0",
-        "@types/react": "^18.2.0",
-        typescript: "^5.3.0",
-      },
-      ebade: {
-        type: projectType,
-        version: "0.1.0",
-      },
-    },
-    null,
-    2
-  );
-}
-
-// Generate globals.css
-function generateGlobalsCss(): string {
-  return `/* ebade Generated Design System */
-
-:root {
-  --color-primary: #6366f1;
-  --color-secondary: #f59e0b;
-  --color-accent: #10b981;
-  
-  --font-family: 'Inter', system-ui, sans-serif;
-  
-  --radius-sm: 0.25rem;
-  --radius-md: 0.5rem;
-  --radius-lg: 1rem;
-}
-
-* {
-  box-sizing: border-box;
-  margin: 0;
-  padding: 0;
-}
-
-body {
-  font-family: var(--font-family);
-  line-height: 1.6;
-  color: #1f2937;
-}
-
-.container {
-  max-width: 1200px;
-  margin: 0 auto;
-  padding: 0 1rem;
-}
+      type: projectType.toLowerCase().replace(" ", "-"),
+      description: `Generated ${projectType} via ebade MCP`,
+      features: template.features,
+      pages: template.pages,
+      design: {
+        ...template.design,
+        colors: { primary: primaryColor },
+      },
+    };
+
+    fs.writeFileSync(
+      path.join(projectDir, "project.ebade.yaml"),
+      yaml.stringify(ebadeConfig)
+    );
 
-.page {
-  min-height: 100vh;
-}
-`;
-}
+    // 3. Generate Next.js files (Basic mocks to match CLI)
+    generateCoreFiles(projectDir, ebadeConfig);
 
-export async function scaffoldProject(args: ScaffoldArgs) {
-  const { projectName, projectType, features = [], outputDir } = args;
+    return `✅ ebade v0.3.1 Scaffold Complete!
+    
+Project: ${projectName}
+Type: ${projectType}
+Dir: ${projectDir}
 
-  // Get template for project type
-  const template = projectTemplates[projectType];
-  if (!template) {
+Next Steps:
+1. Open this folder in Cursor/Claude
+2. Run 'npx ebade dev project.ebade.yaml' to start the agent engine.`;
+  } catch (error) {
     throw new Error(
-      `Unknown project type: ${projectType}. Available: ${Object.keys(
-        projectTemplates
-      ).join(", ")}`
+      `Scaffold failed: ${
+        error instanceof Error ? error.message : String(error)
+      }`
     );
   }
+}
 
-  // Create project directory
-  const projectDir = path.join(outputDir, projectName);
-
-  // Create directory structure
-  const dirs = ["", "app", "components", "lib", "styles", "public", "types"];
-
-  for (const dir of dirs) {
-    const fullPath = path.join(projectDir, dir);
-    if (!fs.existsSync(fullPath)) {
-      fs.mkdirSync(fullPath, { recursive: true });
-    }
-  }
-
-  // Track created files
-  const createdFiles: string[] = [];
-
-  // Generate pages
-  for (const page of template.pages) {
-    // Create page directory if needed
-    const pagePath =
-      page.path === "/"
-        ? "app/page.tsx"
-        : `app${page.path.replace("[", "(").replace("]", ")")}/page.tsx`;
-
-    const pageDir = path.dirname(path.join(projectDir, pagePath));
-    if (!fs.existsSync(pageDir)) {
-      fs.mkdirSync(pageDir, { recursive: true });
-    }
-
-    // Write page file
-    const pageContent = generatePageTemplate(page);
-    fs.writeFileSync(path.join(projectDir, pagePath), pageContent);
-    createdFiles.push(pagePath);
-
-    // Generate component files
-    for (const component of page.components || []) {
-      const componentPath = `components/${component}.tsx`;
-      const fullComponentPath = path.join(projectDir, componentPath);
-
-      if (!fs.existsSync(fullComponentPath)) {
-        const componentContent = componentTemplates.default(component);
-        fs.writeFileSync(fullComponentPath, componentContent);
-        createdFiles.push(componentPath);
-      }
-    }
-  }
-
-  // Generate package.json
+function generateCoreFiles(projectDir: string, config: any) {
+  // package.json
+  const pkg = {
+    name: config.name,
+    version: "0.1.0",
+    dependencies: {
+      next: "latest",
+      react: "latest",
+      "react-dom": "latest",
+      "lucide-react": "latest",
+    },
+    devDependencies: {
+      "@types/node": "latest",
+      "@types/react": "latest",
+      "@types/react-dom": "latest",
+      autoprefixer: "latest",
+      postcss: "latest",
+      tailwindcss: "latest",
+      typescript: "latest",
+    },
+    scripts: { dev: "next dev", build: "next build", start: "next start" },
+  };
   fs.writeFileSync(
     path.join(projectDir, "package.json"),
-    generatePackageJson(projectName, projectType)
+    JSON.stringify(pkg, null, 2)
   );
-  createdFiles.push("package.json");
 
-  // Generate globals.css
-  fs.writeFileSync(
-    path.join(projectDir, "styles/globals.css"),
-    generateGlobalsCss()
-  );
-  createdFiles.push("styles/globals.css");
-
-  // Generate intent file for reference
-  const intentContent = yaml.stringify({
-    name: projectName,
-    type: projectType,
-    features: features,
-    pages: template.pages,
-    data: template.data,
-    design: {
-      style: "minimal-modern",
-      colors: {
-        primary: "#6366f1",
-        secondary: "#f59e0b",
-        accent: "#10b981",
-      },
+  // tsconfig.json (Basic version)
+  const tsconfig = {
+    compilerOptions: {
+      target: "es5",
+      lib: ["dom", "dom.iterable", "esnext"],
+      allowJs: true,
+      skipLibCheck: true,
+      strict: true,
+      noEmit: true,
+      esModuleInterop: true,
+      module: "esnext",
+      moduleResolution: "bundler",
+      resolveJsonModule: true,
+      isolatedModules: true,
+      jsx: "preserve",
+      incremental: true,
+      plugins: [{ name: "next" }],
+      paths: { "@/*": ["./*"] },
     },
-  });
-  fs.writeFileSync(path.join(projectDir, "project.ebade.yaml"), intentContent);
-  createdFiles.push("project.ebade.yaml");
-
-  // Generate layout
-  const layoutContent = `import "./globals.css";
-import type { Metadata } from "next";
-import { Inter } from "next/font/google";
-
-const inter = Inter({ subsets: ["latin"] });
-
-export const metadata: Metadata = {
-  title: "${projectName}",
-  description: "Built with ebade",
-};
-
-export default function RootLayout({
-  children,
-}: {
-  children: React.ReactNode;
-}) {
-  return (
-    <html lang="en">
-      <body className={inter.className}>{children}</body>
-    </html>
-  );
-}
-`;
-  fs.writeFileSync(path.join(projectDir, "app/layout.tsx"), layoutContent);
-  // Copy globals.css to app folder for Next.js
+    include: ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
+    exclude: ["node_modules"],
+  };
   fs.writeFileSync(
-    path.join(projectDir, "app/globals.css"),
-    generateGlobalsCss()
+    path.join(projectDir, "tsconfig.json"),
+    JSON.stringify(tsconfig, null, 2)
   );
-  createdFiles.push("app/layout.tsx", "app/globals.css");
-
-  return {
-    content: [
-      {
-        type: "text",
-        text: `✅ Successfully scaffolded "${projectName}" (${projectType})
 
-📁 Project created at: ${projectDir}
-
-📄 Files created:
-${createdFiles.map((f) => `  • ${f}`).join("\n")}
-
-🚀 Next steps:
-  1. cd ${projectDir}
-  2. npm install
-  3. npm run dev
-
-📋 ebade file saved as: project.ebade.yaml
-   This can be used by AI agents to understand and iterate on the project.
-`,
-      },
-    ],
-  };
+  // .cursorrules
+  const rules = `
+# ebade Agent Rules for ${config.name}
+- Respect project.ebade.yaml as the source of truth.
+- Follow the ${config.design.style} design style.
+- Use ${config.design.colors.primary} as the primary color.
+- Always import React from 'react' in .tsx files.
+`;
+  fs.writeFileSync(path.join(projectDir, ".cursorrules"), rules);
 }

package/packages/vscode-extension/README.md

@@ -0,0 +1,45 @@
+# ebade VS Code Extension
+
+Syntax highlighting, snippets, and language support for `.ebade.yaml` files.
+
+## Features
+
+### 🎨 Syntax Highlighting
+
+- Keywords: `project`, `pages`, `api`, `data`, `design`
+- Decorators: `@page`, `@intent`, `@requires`
+- Strings, numbers, booleans
+- Comments
+
+### ✨ Snippets (v0.3.2 Updates)
+
+| Prefix | Description |
+| :--- | :--- |
+| `eb-saas` | Full SaaS Dashboard template |
+| `eb-shop` | Full E-commerce store template |
+| `eb-page` | New page definition |
+| `eb-comp` | Component reference |
+
+## Installation
+
+### From VSIX (Local)
+
+```bash
+cd packages/vscode-extension
+npx vsce package
+code --install-extension ebade-*.vsix
+```
+
+### From Marketplace (Coming Soon)
+
+Search for "ebade" in VS Code Extensions.
+
+## Usage
+
+1. Create a file with `.ebade.yaml` extension
+2. Start typing `eb-` to see available snippets
+3. Enjoy syntax highlighting! 🎉
+
+---
+
+Built with 💜 by the ebade team.