ebade 0.3.0 → 0.4.0

package/cli/scaffold.js

@@ -62,60 +62,86 @@ function parseEbade(ebadePath) {
 // ============================================
 // Component Generator Templates
 // ============================================
-const componentTemplates = {
-  "hero-section": (design) => `
-export function HeroSection() {
-  return (
-    <section className="hero-section">
-      <div className="hero-content">
-        <h1 className="hero-title">Welcome to Our Store</h1>
-        <p className="hero-subtitle">Discover amazing products</p>
-        <button className="hero-cta" style={{ backgroundColor: '${
-          design.colors?.primary || "#6366f1"
-        }' }}>
-          Shop Now
-        </button>
-      </div>
-    </section>
-  );
-}
-`,
-  "product-grid": (design) => `
-export function ProductGrid({ products }) {
-  return (
-    <div className="product-grid">
-      {products.map((product) => (
-        <ProductCard key={product.id} product={product} />
-      ))}
-    </div>
+// ============================================
+// Template Resolver
+// ============================================
+function getComponentTemplate(componentName, design) {
+  const templatePath = path.join(
+    process.cwd(),
+    "cli/templates",
+    `${componentName}.tsx`
   );
-}
-`,
-  "add-to-cart": (design) => `
-import { useState } from 'react';
 
-export function AddToCart({ product, onAdd }) {
-  const [quantity, setQuantity] = useState(1);
-  
+  if (fs.existsSync(templatePath)) {
+    let content = fs.readFileSync(templatePath, "utf-8");
+
+    // Config-based replacement (e.g., {{primary}})
+    const primaryColor = design?.colors?.primary || "#6366f1";
+    content = content.replace(/\{\{primary\}\}/g, primaryColor);
+
+    return content;
+  }
+
+  // Fallback to placeholder if template file doesn't exist
+  return `import React from 'react';
+import { cn } from "@/lib/utils";
+
+/**
+ * 🧠 Generated via ebade
+ * Component: ${toPascalCase(componentName)}
+ * Status: Placeholder (No template found in cli/templates)
+ */
+export function ${toPascalCase(componentName)}() {
   return (
-    <div className="add-to-cart">
-      <div className="quantity-selector">
-        <button onClick={() => setQuantity(q => Math.max(1, q - 1))}>-</button>
-        <span>{quantity}</span>
-        <button onClick={() => setQuantity(q => q + 1)}>+</button>
+    <div className="p-12 border-2 border-dashed border-border rounded-3xl text-center bg-muted/30">
+      <div className="w-16 h-16 bg-primary/10 rounded-2xl flex items-center justify-center mx-auto mb-4">
+        <span className="text-2xl">🧩</span>
       </div>
-      <button 
-        className="add-btn"
-        style={{ backgroundColor: '${design.colors?.primary || "#6366f1"}' }}
-        onClick={() => onAdd(product, quantity)}
-      >
-        Add to Cart
-      </button>
+      <h3 className="text-xl font-bold mb-2">${toPascalCase(componentName)}</h3>
+      <p className="text-sm text-muted-foreground max-w-xs mx-auto">
+        No template found for this intent. Create a file at <code>cli/templates/${componentName}.tsx</code> to customize.
+      </p>
     </div>
   );
 }
-`,
-};
+`;
+}
+
+function generateComponentTest(componentName) {
+  const name = toPascalCase(componentName);
+  return `import { describe, it, expect } from 'vitest';
+import { render } from '@testing-library/react';
+import { ${name} } from './${componentName}';
+import React from 'react';
+
+describe('${name} Component', () => {
+  it('renders without crashing', () => {
+    render(<${name} />);
+    expect(document.body).toBeDefined();
+  });
+});
+`;
+}
+
+function generateVitestConfig() {
+  return `import { defineConfig } from 'vitest/config';
+import react from '@vitejs/plugin-react';
+import path from 'path';
+
+export default defineConfig({
+  plugins: [react()],
+  test: {
+    environment: 'jsdom',
+    globals: true,
+  },
+  resolve: {
+    alias: {
+      '@': path.resolve(__dirname, './'),
+    },
+  },
+});
+`;
+}
 
 // ============================================
 // Page Generator
@@ -127,10 +153,13 @@ function generatePage(page, design) {
       .join("\n") || "";
 
   const componentUsage =
-    page.components?.map((c) => `      <${toPascalCase(c)} />`).join("\n") ||
-    "      {/* No components defined */}";
+    page.components
+      ?.map((c) => `          <${toPascalCase(c)} />`)
+      .join("\n") || "          {/* No components defined */}";
+
+  return `import React from 'react';
+${componentImports}
 
-  return `
 /**
  * 🧠 Generated via ebade - The Agent-First Framework
  * https://github.com/hasankemaldemirci/ebade
@@ -138,19 +167,26 @@ function generatePage(page, design) {
  * @page('${page.path}')
  * @intent('${page.intent}')
  */
-
-${componentImports}
-
-
 export default function ${toPascalCase(page.intent)}Page() {
   return (
-    <main className="page ${page.intent}">
+    <div className="min-h-screen bg-slate-950 text-white">
+      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-10">
+        <header className="mb-12">
+          <h1 className="text-3xl font-bold tracking-tight opacity-90">${toPascalCase(
+            page.intent
+          )}</h1>
+          <p className="text-sm opacity-40 mt-1">Route: ${page.path}</p>
+        </header>
+        
+        <main className="space-y-12">
 ${componentUsage}
-    </main>
+        </main>
+      </div>
+    </div>
   );
 }
 
-// Auth requirement: ${page.auth || "public"}
+// Auth: ${page.auth || "public"}
 `;
 }
 
@@ -221,16 +257,30 @@ function generatePackageJson(config) {
         build: "next build",
         start: "next start",
         lint: "next lint",
+        test: "vitest",
       },
       dependencies: {
         next: "^14.0.0",
         react: "^18.2.0",
         "react-dom": "^18.2.0",
+        "lucide-react": "^0.300.0",
+        clsx: "^2.1.0",
+        "tailwind-merge": "^2.2.0",
+        "class-variance-authority": "^0.7.0",
+        "framer-motion": "^11.0.0",
       },
       devDependencies: {
         "@types/node": "^20.0.0",
         "@types/react": "^18.2.0",
         "@types/react-dom": "^18.2.0",
+        "@testing-library/react": "^14.1.2",
+        "@vitejs/plugin-react": "^4.2.0",
+        jsdom: "^22.1.0",
+        vitest: "^0.34.6",
+        autoprefixer: "^10.0.1",
+        postcss: "^8.4.0",
+        tailwindcss: "^3.4.0",
+        "tailwindcss-animate": "^1.0.7",
         typescript: "^5.0.0",
       },
     },
@@ -239,6 +289,87 @@ function generatePackageJson(config) {
   );
 }
 
+function generateTailwindConfig() {
+  return `/** @type {import('tailwindcss').Config} */
+module.exports = {
+  darkMode: ["class"],
+  content: [
+    './pages/**/*.{ts,tsx}',
+    './components/**/*.{ts,tsx}',
+    './app/**/*.{ts,tsx}',
+    './src/**/*.{ts,tsx}',
+  ],
+  prefix: "",
+  theme: {
+    container: {
+      center: true,
+      padding: "2rem",
+      screens: {
+        "2xl": "1400px",
+      },
+    },
+    extend: {
+      colors: {
+        border: "hsl(var(--border))",
+        input: "hsl(var(--input))",
+        ring: "hsl(var(--ring))",
+        background: "hsl(var(--background))",
+        foreground: "hsl(var(--foreground))",
+        primary: {
+          DEFAULT: "hsl(var(--primary))",
+          foreground: "hsl(var(--primary-foreground))",
+        },
+        secondary: {
+          DEFAULT: "hsl(var(--secondary))",
+          foreground: "hsl(var(--secondary-foreground))",
+        },
+        destructive: {
+          DEFAULT: "hsl(var(--destructive))",
+          foreground: "hsl(var(--destructive-foreground))",
+        },
+        muted: {
+          DEFAULT: "hsl(var(--muted))",
+          foreground: "hsl(var(--muted-foreground))",
+        },
+        accent: {
+          DEFAULT: "hsl(var(--accent))",
+          foreground: "hsl(var(--accent-foreground))",
+        },
+        popover: {
+          DEFAULT: "hsl(var(--popover))",
+          foreground: "hsl(var(--popover-foreground))",
+        },
+        card: {
+          DEFAULT: "hsl(var(--card))",
+          foreground: "hsl(var(--card-foreground))",
+        },
+      },
+      borderRadius: {
+        lg: "var(--radius)",
+        md: "calc(var(--radius) - 2px)",
+        sm: "calc(var(--radius) - 4px)",
+      },
+      keyframes: {
+        "accordion-down": {
+          from: { height: "0" },
+          to: { height: "var(--radix-accordion-content-height)" },
+        },
+        "accordion-up": {
+          from: { height: "var(--radix-accordion-content-height)" },
+          to: { height: "0" },
+        },
+      },
+      animation: {
+        "accordion-down": "accordion-down 0.2s ease-out",
+        "accordion-up": "accordion-up 0.2s ease-out",
+      },
+    },
+  },
+  plugins: [require("tailwindcss-animate")],
+}
+`;
+}
+
 function generateNextConfig() {
   return `/** @type {import('next').NextConfig} */
 const nextConfig = {};
@@ -250,6 +381,7 @@ function generateTsConfig() {
   return JSON.stringify(
     {
       compilerOptions: {
+        target: "es5",
         lib: ["dom", "dom.iterable", "esnext"],
         allowJs: true,
         skipLibCheck: true,
@@ -257,10 +389,10 @@ function generateTsConfig() {
         noEmit: true,
         esModuleInterop: true,
         module: "esnext",
-        moduleResolution: "bundler",
+        moduleResolution: "node",
         resolveJsonModule: true,
         isolatedModules: true,
-        jsx: "preserve",
+        jsx: "react-jsx",
         incremental: true,
         plugins: [{ name: "next" }],
         paths: { "@/*": ["./*"] },
@@ -275,7 +407,8 @@ function generateTsConfig() {
 
 function generateLayout(config) {
   const fontFamily = config.design?.font || "Inter";
-  return `import type { Metadata } from "next";
+  return `import React from 'react';
+import type { Metadata } from "next";
 import "./globals.css";
 
 export const metadata: Metadata = {
@@ -307,119 +440,95 @@ export default function RootLayout({
 }
 
 function generateGlobalsCss(design) {
-  return `/* ebade Generated Design System */
-/* Style: ${design.style || "minimal-modern"} */
-
-:root {
-  --color-primary: ${design.colors?.primary || "#6366f1"};
-  --color-secondary: ${design.colors?.secondary || "#f59e0b"};
-  --color-accent: ${design.colors?.accent || "#10b981"};
-  --font-family: '${design.font || "Inter"}', system-ui, sans-serif;
-  --radius-lg: 1rem;
-}
-
-* {
-  box-sizing: border-box;
-  margin: 0;
-  padding: 0;
-}
-
-body {
-  font-family: var(--font-family);
-  line-height: 1.6;
-  color: #1f2937;
-  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-  min-height: 100vh;
-}
-
-.page {
-  min-height: 100vh;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  padding: 2rem;
-  color: white;
-}
-
-.hero-section {
-  text-align: center;
-  max-width: 800px;
-}
-
-.hero-title {
-  font-size: 3.5rem;
-  font-weight: 800;
-  margin-bottom: 1rem;
-}
-
-.hero-subtitle {
-  font-size: 1.25rem;
-  opacity: 0.9;
-  margin-bottom: 2rem;
-}
-
-.hero-cta {
-  background: white;
-  color: var(--color-primary);
-  padding: 1rem 2rem;
-  font-size: 1.1rem;
-  border-radius: var(--radius-lg);
-  border: none;
-  cursor: pointer;
-  font-weight: 600;
-  transition: transform 0.2s, box-shadow 0.2s;
-}
-
-.hero-cta:hover {
-  transform: scale(1.05);
-  box-shadow: 0 8px 24px rgba(0,0,0,0.2);
-}
-
-.btn-primary {
-  background-color: var(--color-primary);
-  color: white;
-  padding: 0.75rem 1.5rem;
-  border-radius: var(--radius-lg);
-  border: none;
-  cursor: pointer;
-  transition: opacity 0.2s;
-}
-
-.btn-primary:hover {
-  opacity: 0.9;
-}
-
-.product-grid {
-  display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
-  gap: 1.5rem;
-  padding: 2rem;
+  const primary = design.colors?.primary || "#6366f1";
+
+  // Helper to convert hex to HSL for CSS vars if needed
+  // For now we'll use standard shadcn slate
+  return `@tailwind base;
+@tailwind components;
+@tailwind utilities;
+ 
+@layer base {
+  :root {
+    --background: 0 0% 100%;
+    --foreground: 222.2 84% 4.9%;
+ 
+    --card: 0 0% 100%;
+    --card-foreground: 222.2 84% 4.9%;
+ 
+    --popover: 0 0% 100%;
+    --popover-foreground: 222.2 84% 4.9%;
+ 
+    --primary: 221.2 83.2% 53.3%;
+    --primary-foreground: 210 40% 98%;
+ 
+    --secondary: 210 40% 96.1%;
+    --secondary-foreground: 222.2 47.4% 11.2%;
+ 
+    --muted: 210 40% 96.1%;
+    --muted-foreground: 215.4 16.3% 46.9%;
+ 
+    --accent: 210 40% 96.1%;
+    --accent-foreground: 222.2 47.4% 11.2%;
+ 
+    --destructive: 0 84.2% 60.2%;
+    --destructive-foreground: 210 40% 98%;
+ 
+    --border: 214.3 31.8% 91.4%;
+    --input: 214.3 31.8% 91.4%;
+    --ring: 221.2 83.2% 53.3%;
+ 
+    --radius: 0.5rem;
+  }
+ 
+  .dark {
+    --background: 222.2 84% 4.9%;
+    --foreground: 210 40% 98%;
+ 
+    --card: 222.2 84% 4.9%;
+    --card-foreground: 210 40% 98%;
+ 
+    --popover: 222.2 84% 4.9%;
+    --popover-foreground: 210 40% 98%;
+ 
+    --primary: 217.2 91.2% 59.8%;
+    --primary-foreground: 222.2 47.4% 11.2%;
+ 
+    --secondary: 217.2 32.6% 17.5%;
+    --secondary-foreground: 210 40% 98%;
+ 
+    --muted: 217.2 32.6% 17.5%;
+    --muted-foreground: 215 20.2% 65.1%;
+ 
+    --accent: 217.2 32.6% 17.5%;
+    --accent-foreground: 210 40% 98%;
+ 
+    --destructive: 0 62.8% 30.6%;
+    --destructive-foreground: 210 40% 98%;
+ 
+    --border: 217.2 32.6% 17.5%;
+    --input: 217.2 32.6% 17.5%;
+    --ring: 224.3 76.3% 48%;
+  }
 }
-
-.add-to-cart {
-  display: flex;
-  gap: 1rem;
-  align-items: center;
+ 
+@layer base {
+  * {
+    @apply border-border;
+  }
+  body {
+    @apply bg-background text-foreground;
+  }
 }
-
-.quantity-selector {
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
+`;
 }
 
-.quantity-selector button {
-  width: 32px;
-  height: 32px;
-  border: 1px solid #e5e7eb;
-  background: white;
-  border-radius: 4px;
-  cursor: pointer;
-}
+function generateUtils() {
+  return `import { type ClassValue, clsx } from "clsx"
+import { twMerge } from "tailwind-merge"
 
-.add-btn {
-  flex: 1;
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs))
 }
 `;
 }
@@ -550,7 +659,13 @@ function ensureDir(dir) {
 // ============================================
 function scaffold(ebadePath, outputDir) {
   const startTime = Date.now();
-  let stats = { pages: 0, components: 0, apiRoutes: 0, files: 0 };
+  const stats = {
+    pages: 0,
+    components: 0,
+    apiRoutes: 0,
+    files: 0,
+    tokenSavings: 0,
+  };
 
   console.log(LOGO);
 
@@ -583,6 +698,10 @@ function scaffold(ebadePath, outputDir) {
     log.file(`${dir}/`);
   });
 
+  // lib/utils.ts
+  fs.writeFileSync(path.join(projectDir, "lib/utils.ts"), generateUtils());
+  log.file("lib/utils.ts");
+
   // ========== Generate Pages ==========
   log.section("Generating pages");
 
@@ -618,21 +737,23 @@ function scaffold(ebadePath, outputDir) {
   const spinner2 = ora("Generating components...").start();
   allComponents.forEach((component) => {
     const componentPath = `components/${component}.tsx`;
-    const template = componentTemplates[component];
-    const content = template
-      ? template(config.design)
-      : `// TODO: Implement ${toPascalCase(
-          component
-        )} component\nexport function ${toPascalCase(
-          component
-        )}() {\n  return <div>${component}</div>;\n}\n`;
+    const content = getComponentTemplate(component, config.design);
+    stats.tokenSavings += Math.floor(content.length / 4);
 
     fs.writeFileSync(path.join(projectDir, componentPath), content.trim());
+
+    // Generate unit test
+    const testPath = `components/${component}.test.tsx`;
+    fs.writeFileSync(
+      path.join(projectDir, testPath),
+      generateComponentTest(component).trim()
+    );
+
     stats.components++;
-    stats.files++;
+    stats.files += 2; // Component + Test
   });
   spinner2.succeed(
-    `Generated ${colors.bright}${stats.components}${colors.reset} components`
+    `Generated ${colors.bright}${stats.components}${colors.reset} components (+ tests)`
   );
 
   // ========== Generate API Routes ==========
@@ -683,6 +804,20 @@ function scaffold(ebadePath, outputDir) {
   fs.writeFileSync(path.join(projectDir, "tsconfig.json"), generateTsConfig());
   log.file("tsconfig.json");
 
+  // tailwind.config.js
+  fs.writeFileSync(
+    path.join(projectDir, "tailwind.config.js"),
+    generateTailwindConfig()
+  );
+  log.file("tailwind.config.js");
+
+  // vitest.config.ts
+  fs.writeFileSync(
+    path.join(projectDir, "vitest.config.ts"),
+    generateVitestConfig()
+  );
+  log.file("vitest.config.ts");
+
   // app/layout.tsx
   fs.writeFileSync(
     path.join(projectDir, "app/layout.tsx"),
@@ -739,7 +874,6 @@ function scaffold(ebadePath, outputDir) {
 
   // ========== Summary ==========
   const duration = ((Date.now() - startTime) / 1000).toFixed(1);
-  const estimatedTokenSavings = Math.round(stats.files * 35); // ~35 tokens saved per file
 
   console.log(`
 ${colors.bright}${colors.green}  ┌${"─".repeat(41)}┐${colors.reset}
@@ -759,9 +893,7 @@ ${colors.green}  │${colors.reset}  ${colors.cyan}📁 Files Created:${
   }    ${String(stats.files).padEnd(18)} ${colors.green}│${colors.reset}
 ${colors.green}  │${colors.reset}  ${colors.cyan}📊 Token Savings:${
     colors.reset
-  }    ~${String(estimatedTokenSavings).padEnd(17)} ${colors.green}│${
-    colors.reset
-  }
+  }    ~${String(stats.tokenSavings).padEnd(17)} ${colors.green}│${colors.reset}
 ${colors.green}  │${colors.reset}  ${colors.cyan}⏱  Completed in:${
     colors.reset
   }    ${String(duration + "s").padEnd(18)} ${colors.green}│${colors.reset}