npm - @helloleo/plugins - Versions diffs - 0.1.14 → 0.1.16 - Mend

@helloleo/plugins 0.1.14 → 0.1.16

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (125) hide show

package/src/tools/scaffold.ts CHANGED Viewed

@@ -2,245 +2,17 @@ import { mkdir } from "node:fs/promises";
 import path from "node:path";
 import type { Plugin } from "@opencode-ai/plugin";
 import { tool } from "@opencode-ai/plugin";
+import { renderTemplate } from "../template-render.ts";
-function packageJson(name: string) {
-	return JSON.stringify(
-		{
-			name,
-			private: true,
-			version: "0.0.0",
-			type: "module",
-			scripts: {
-				dev: "vite",
-				start: "vite",
-				build: "vite build",
-				preview: "vite preview",
-			},
-			dependencies: {
-				react: "^18.3.1",
-				"react-dom": "^18.3.1",
-				clsx: "^2.1.1",
-				"tailwind-merge": "^2.6.0",
-				"lucide-react": "^1.14.0",
-			},
-			devDependencies: {
-				"@types/react": "^18.3.12",
-				"@types/react-dom": "^18.3.1",
-				"@vitejs/plugin-react": "^4.3.4",
-				autoprefixer: "^10.4.20",
-				postcss: "^8.4.49",
-				tailwindcss: "^3.4.17",
-				typescript: "^5.6.3",
-				vite: "^6.0.5",
-			},
-		},
-		null,
-		2,
-	);
-}
-function indexHtml(fontFamily: string) {
-	const fontParam = fontFamily.replace(/\s+/g, "+");
-	return `<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <link rel="preconnect" href="https://fonts.googleapis.com">
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-    <link href="https://fonts.googleapis.com/css2?family=${fontParam}:wght@400;500;600;700&display=swap" rel="stylesheet">
-    <title>App</title>
-  </head>
-  <body>
-    <div id="root"></div>
-    <script type="module" src="/src/main.tsx"></script>
-  </body>
-</html>`;
-}
-function viteConfig() {
-	return `import { defineConfig } from 'vite'
-import react from '@vitejs/plugin-react'
-import path from 'path'
-export default defineConfig({
-  plugins: [react()],
-  server: {
-    allowedHosts: true,
-  },
-  resolve: {
-    alias: {
-      '@': path.resolve(__dirname, './src'),
-    },
-  },
-})`;
-}
-function tailwindConfig() {
-	return `export default {
-  darkMode: ["class"],
-  content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"],
-  theme: {
-    extend: {
-      colors: {
-        background: "hsl(var(--background))",
-        foreground: "hsl(var(--foreground))",
-        card: { DEFAULT: "hsl(var(--card))", foreground: "hsl(var(--card-foreground))" },
-        primary: { DEFAULT: "hsl(var(--primary))", foreground: "hsl(var(--primary-foreground))" },
-        secondary: { DEFAULT: "hsl(var(--secondary))", foreground: "hsl(var(--secondary-foreground))" },
-        muted: { DEFAULT: "hsl(var(--muted))", foreground: "hsl(var(--muted-foreground))" },
-        accent: { DEFAULT: "hsl(var(--accent))", foreground: "hsl(var(--accent-foreground))" },
-        destructive: { DEFAULT: "hsl(var(--destructive))", foreground: "hsl(var(--destructive-foreground))" },
-        success: { DEFAULT: "hsl(var(--success))", foreground: "hsl(var(--success-foreground))" },
-        warning: { DEFAULT: "hsl(var(--warning))", foreground: "hsl(var(--warning-foreground))" },
-        border: "hsl(var(--border))",
-        input: "hsl(var(--input))",
-        ring: "hsl(var(--ring))",
-      },
-      fontFamily: {
-        sans: "var(--font-sans)",
-        heading: "var(--font-heading)",
-      },
-      borderRadius: {
-        lg: "var(--radius)",
-        md: "calc(var(--radius) - 2px)",
-        sm: "calc(var(--radius) - 4px)",
-      },
-      borderWidth: {
-        DEFAULT: "var(--border-width)",
-      },
-      boxShadow: {
-        DEFAULT: "var(--shadow)",
-        lg: "var(--shadow-lg)",
-      },
-    },
-  },
-  plugins: [],
-}`;
-}
-function postcssConfig() {
-	return `export default {
-  plugins: {
-    tailwindcss: {},
-    autoprefixer: {},
-  },
-}`;
-}
-function indexCss(
-	primaryColor: string,
-	fontFamily: string,
-	borderRadius: string,
-) {
-	const fontValue = `'${fontFamily}', ui-sans-serif, system-ui, sans-serif`;
-	return `/*
- * HelloLeo Design System -- READ BEFORE STYLING.
- *
- * The CSS variables below are the single source of truth for the project's
- * design tokens. They power the no-code Design panel in the HelloLeo webapp:
- * the user edits colors / fonts / radius / shadows visually, and the panel
- * writes back to THIS file. Keeping the conventions intact is what unlocks
- * that round-trip.
- *
- * Conventions (do not break):
- *   - All colors stored as raw HSL triplets (no hsl() wrapper, no #hex).
- *     Tailwind classes wrap them via hsl(var(--token)). Never inline #hex
- *     in components -- always use design tokens (bg-primary, text-foreground,
- *     border-border, etc.).
- *   - --primary / --secondary / --accent / --destructive / --success /
- *     --warning each have a paired -foreground for text on that surface.
- *   - --radius drives lg/md/sm via calc() in tailwind.config.js. Edit here,
- *     not in component classes.
- *   - --font-sans for body, --font-heading for headings. Both load from the
- *     Google Fonts <link> in index.html.
- *   - .dark variants mirror :root one-for-one. When adding a token, add it
- *     to BOTH blocks or dark mode breaks.
- *
- * UI primitives (Button, Card, Input, Modal, Table, Badge, Alert, Spinner)
- * MUST live in src/components/ui/ and consume these tokens via Tailwind
- * classes -- never hardcoded colors. One responsibility per file, <50 lines
- * per component.
+/**
+ * Identifier for the scaffold template a project was generated from. It is
+ * also the directory name under src/templates/. Written to .leo/project.json
+ * so the webapp / leo-core can tell which template (and therefore which
+ * conventions: TanStack Router file routing, Tailwind v4, shadcn/ui) a
+ * workspace was bootstrapped with. Bump this (and add a new templates/<id>/
+ * dir) when the scaffold's shape changes.
  */
-@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%;
-    --primary: ${primaryColor};
-    --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%;
-    --success: 142 76% 36%;
-    --success-foreground: 210 40% 98%;
-    --warning: 38 92% 50%;
-    --warning-foreground: 222.2 47.4% 11.2%;
-    --border: 214.3 31.8% 91.4%;
-    --input: 214.3 31.8% 91.4%;
-    --ring: 221.2 83.2% 53.3%;
-    --radius: ${borderRadius};
-    --border-width: 1px;
-    --shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
-    --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
-    --font-sans: ${fontValue};
-    --font-heading: ${fontValue};
-  }
-  .dark {
-    --background: 222.2 84% 4.9%;
-    --foreground: 210 40% 98%;
-    --card: 222.2 84% 4.9%;
-    --card-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%;
-    --success: 142 76% 36%;
-    --success-foreground: 210 40% 98%;
-    --warning: 38 92% 50%;
-    --warning-foreground: 222.2 47.4% 11.2%;
-    --border: 217.2 32.6% 17.5%;
-    --input: 217.2 32.6% 17.5%;
-    --ring: 224.3 76.3% 48%;
-    --border-width: 1px;
-    --shadow: 0 1px 3px 0 rgb(0 0 0 / 0.3), 0 1px 2px -1px rgb(0 0 0 / 0.3);
-    --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.3), 0 4px 6px -4px rgb(0 0 0 / 0.3);
-    --font-sans: ${fontValue};
-    --font-heading: ${fontValue};
-  }
-}
-body {
-  @apply bg-background text-foreground font-sans;
-}`;
-}
-function utilsTs() {
-	return `import { clsx, type ClassValue } from 'clsx'
-import { twMerge } from 'tailwind-merge'
-export function cn(...inputs: ClassValue[]) {
-  return twMerge(clsx(inputs))
-}`;
-}
+export const SCAFFOLD_VERSION = "tanstack-router-2026-06-15";
 /**
  * The project workspace directory is named after the project UUID -- the
@@ -253,229 +25,56 @@ export function projectUuidFromDir(dir: string): string {
 	return path.basename(dir);
 }
-function proxyTs(projectUuid: string) {
-	return `/*
- * HelloLeo Integration Proxy -- runtime helper for connected integrations.
- *
- * All third-party APIs (Odoo, Airtable, HubSpot, Stripe, Notion, Gladia,
- * Microsoft 365, Klaviyo, Supabase, DimoMaint, etc.) are reachable through
- * this single proxy. The proxy handles auth and CORS using credentials the
- * user already configured in Project Settings -- you NEVER pass an API key
- * from frontend code, and you NEVER call third-party hosts directly.
- *
- * Two modes:
- *   A) Frontend-only project -> import callIntegration() from this file.
- *   B) HelloLeo Cloud project -> route via Worker fetch(env.INTEGRATION_PROXY).
- *      Use Cloud whenever the project needs backend logic, automations,
- *      webhooks, scheduled jobs, or AI agents. Keep secrets server-side.
- *
- * Integration slugs:
- *   Use the exact slug from the Enabled MCP list with the "pipedream-"
- *   prefix removed. e.g. "pipedream-gorgias_oauth" -> "gorgias_oauth".
- *   Native integrations (odoo, airtable) keep their plain name.
- *
- * Response shape (always wrapped):
- *   { success: boolean, status: number, data: <provider payload> }
- *
- *   Unwrap "data" by provider:
- *     odoo            -> data.result
- *     airtable        -> data.records
- *     notion          -> data.results
- *     microsoft 365   -> data.value
- *     klaviyo         -> data.data
- *     supabase / dimomaint -> data
- *
- * Pagination: put query params directly in the endpoint string,
- *   e.g. endpoint: '/api/tickets?cursor=xyz&per_page=100'.
- *   Read pagination metadata from the response to build the next call.
- *   Never .filter() large lists in the frontend -- paginate server-side.
- *
- * Secrets for non-integration APIs (e.g. raw OpenAI): store them in
- * HelloLeo Cloud -> Settings -> Cloud -> Secrets, and read via env.SECRET_NAME
- * from a Worker. Never embed secrets in frontend code.
- */
-export const INTEGRATION_PROXY_URL =
-  'https://api.app.helloleo.dev/api/integration-proxy/${projectUuid}';
-export interface ProxyRequest {
-  integration: string;
-  endpoint: string;
-  method?: 'GET' | 'POST' | 'PUT' | 'PATCH' | 'DELETE';
-  body?: unknown;
-  headers?: Record<string, string>;
-}
-export interface ProxyResponse<T = unknown> {
-  success: boolean;
-  status: number;
-  data: T;
-}
-export async function callIntegration<T = unknown>(
-  req: ProxyRequest,
-): Promise<ProxyResponse<T>> {
-  const res = await fetch(INTEGRATION_PROXY_URL, {
-    method: 'POST',
-    headers: { 'Content-Type': 'application/json' },
-    body: JSON.stringify({ method: 'POST', ...req }),
-  });
-  return res.json();
-}
-/* Example -- Odoo search_read:
- *
- *   const r = await callIntegration({
- *     integration: 'odoo',
- *     endpoint: '/jsonrpc',
- *     body: {
- *       model: 'product.template',
- *       method: 'search_read',
- *       args: [[['type', '=', 'consu']]],
- *       kwargs: { fields: ['name', 'list_price'], limit: 50 },
- *     },
- *   });
- *   const products = r.data?.result ?? [];
- */
-`;
-}
-function hexToHslTriplet(hex: string): string {
-	let h = hex.trim().replace(/^#/, "");
-	if (h.length === 3) {
-		h = h
-			.split("")
-			.map((c) => c + c)
-			.join("");
-	}
-	if (!/^[0-9a-fA-F]{6}$/.test(h)) return "";
-	const r = Number.parseInt(h.slice(0, 2), 16) / 255;
-	const g = Number.parseInt(h.slice(2, 4), 16) / 255;
-	const b = Number.parseInt(h.slice(4, 6), 16) / 255;
-	const max = Math.max(r, g, b);
-	const min = Math.min(r, g, b);
-	const l = (max + min) / 2;
-	let s = 0;
-	let hue = 0;
-	if (max !== min) {
-		const d = max - min;
-		s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
-		switch (max) {
-			case r:
-				hue = (g - b) / d + (g < b ? 6 : 0);
-				break;
-			case g:
-				hue = (b - r) / d + 2;
-				break;
-			default:
-				hue = (r - g) / d + 4;
-		}
-		hue *= 60;
-	}
-	return `${Math.round(hue)} ${Math.round(s * 100)}% ${Math.round(l * 100)}%`;
-}
-function normalizePrimaryColor(value: string): string {
-	const trimmed = value.trim();
-	if (/^(#|[0-9a-fA-F]{3}$|[0-9a-fA-F]{6}$)/.test(trimmed)) {
-		const hsl = hexToHslTriplet(trimmed);
-		if (hsl) return hsl;
-	}
-	return trimmed;
-}
-function mainTsx() {
-	return `import React from 'react'
-import ReactDOM from 'react-dom/client'
-import App from './App'
-import './index.css'
-ReactDOM.createRoot(document.getElementById('root')!).render(
-  <React.StrictMode>
-    <App />
-  </React.StrictMode>,
-)`;
-}
 export interface BaseScaffoldOptions {
 	name?: string;
-	primaryColor?: string;
-	fontFamily?: string;
-	borderRadius?: string;
 }
 /**
- * Write the 9 base scaffold files (no integrations). Shared between
- * `scaffold` (frontend-only) and `setup_netsuite` (base + OAuth files).
- * Returns the list of relative file paths written.
+ * Write the base scaffold by rendering the TanStack Router template into dir,
+ * then adding .leo/project.json (template metadata the tool owns, not part of
+ * the template tree). Shared between `scaffold` (frontend-only) and
+ * `setup_netsuite` (base + OAuth files). Returns the relative paths written.
  */
 export async function writeBaseScaffold(
 	opts: BaseScaffoldOptions,
 	dir: string,
 ): Promise<string[]> {
 	const name = opts.name ?? "leo-project";
-	const primary = normalizePrimaryColor(
-		opts.primaryColor ?? "221.2 83.2% 53.3%",
-	);
-	const font = opts.fontFamily ?? "Inter";
-	const radius = opts.borderRadius ?? "0.5rem";
-	await mkdir(path.join(dir, "src", "lib"), { recursive: true });
+	const created = await renderTemplate(
+		SCAFFOLD_VERSION,
+		{ LEO_NAME: name, LEO_PROJECT_UUID: projectUuidFromDir(dir) },
+		dir,
+	);
-	const files: [string, string][] = [
-		["package.json", packageJson(name)],
-		["index.html", indexHtml(font)],
-		["vite.config.js", viteConfig()],
-		["tailwind.config.js", tailwindConfig()],
-		["postcss.config.js", postcssConfig()],
-		[path.join("src", "index.css"), indexCss(primary, font, radius)],
-		[path.join("src", "lib", "utils.ts"), utilsTs()],
-		[path.join("src", "lib", "proxy.ts"), proxyTs(projectUuidFromDir(dir))],
-		[path.join("src", "main.tsx"), mainTsx()],
-	];
+	await mkdir(path.join(dir, ".leo"), { recursive: true });
+	const leoPath = path.join(".leo", "project.json");
+	await Bun.write(
+		path.join(dir, leoPath),
+		JSON.stringify({ $schema: 1, scaffold: SCAFFOLD_VERSION }, null, 2),
+	);
-	const created: string[] = [];
-	for (const [filePath, content] of files) {
-		await Bun.write(path.join(dir, filePath), content);
-		created.push(filePath);
-	}
-	return created;
+	return [...created, leoPath];
 }
 export const scaffold = tool({
 	description:
-		"Scaffold a new React + Vite + Tailwind CSS project with the HelloLeo design system. " +
-		"Creates all mandatory boilerplate: package.json, index.html (with Google Fonts), " +
-		"vite.config.js, tailwind.config.js, postcss.config.js, src/index.css (CSS variables " +
-		"light+dark), src/lib/utils.ts (cn helper), src/lib/proxy.ts, and src/main.tsx. " +
-		"Call this FIRST for any new project before writing App.tsx and components. " +
-		"For NetSuite projects (NetSuite MCP in the live list), call `setup_netsuite` " +
-		"INSTEAD -- it bundles base scaffold + OAuth wiring in one call. Do not call both.",
+		"Scaffold a new React 19 + Vite + Tailwind CSS v4 + TanStack Router project " +
+		"with shadcn/ui baked in. Renders the full template: TanStack file-based " +
+		"routing (src/routes/), the complete shadcn/ui component set under " +
+		"src/components/ui, src/lib/utils.ts (cn helper), src/lib/proxy.ts " +
+		"(HelloLeo integration proxy), src/styles.css (shadcn design tokens, " +
+		"light+dark), plus package.json, vite.config.ts, tsconfig.json, " +
+		"tsr.config.json, components.json, .gitignore and the generated " +
+		"src/routeTree.gen.ts. Call this FIRST for any new project before adding " +
+		"routes and pages. For NetSuite projects (NetSuite MCP in the live list), " +
+		"call `setup_netsuite` INSTEAD -- it bundles base scaffold + OAuth wiring " +
+		"in one call. Do not call both.",
 	args: {
 		name: tool.schema
 			.string()
 			.optional()
 			.describe("Project name for package.json (default: leo-project)"),
-		primaryColor: tool.schema
-			.string()
-			.optional()
-			.describe(
-				"Primary brand color. Prefer raw HSL triplet (no hsl() wrapper, no # prefix), " +
-					'e.g. "221.2 83.2% 53.3%". Hex like "#3b82f6" is also accepted and will ' +
-					"be auto-converted. Default: blue.",
-			),
-		fontFamily: tool.schema
-			.string()
-			.optional()
-			.describe(
-				'Google Font family name, e.g. "Inter", "Poppins" (default: Inter)',
-			),
-		borderRadius: tool.schema
-			.string()
-			.optional()
-			.describe(
-				'Base border radius, e.g. "0.5rem", "0.75rem" (default: 0.5rem)',
-			),
 	},
 	async execute(args, context) {
 		const created = await writeBaseScaffold(args, context.directory);
@@ -483,13 +82,21 @@ export const scaffold = tool({
 			`Scaffolded ${created.length} files:`,
 			...created.map((f) => `  - ${f}`),
 			"",
-			"Next: create src/App.tsx with your application code.",
-			"Design system reference: read the header comment in src/index.css",
-			"  before adding tokens or styling primitives.",
-			"Integration calls: use callIntegration() from src/lib/proxy.ts.",
-			"  Header comment in that file documents slugs, response unwrapping,",
-			"  pagination, and frontend-only vs HelloLeo Cloud routing.",
-			"Update package.json with any extra packages you need after scaffolding.",
+			"Next: add routes as files under src/routes/ (TanStack file-based",
+			"  routing). Edit src/routes/index.tsx for the home page.",
+			"UI: shadcn/ui components are already in src/components/ui -- import and",
+			"  use them; do not attempt to re-add via the shadcn CLI.",
+			"Design system: edit tokens in src/styles.css (light + dark blocks).",
+			"Data fetching: React Query is wired (QueryClient on the router context +",
+			"  QueryClientProvider). ALWAYS fetch with @tanstack/react-query --",
+			"  useQuery / useMutation in components, or a route loader calling",
+			"  context.queryClient.ensureQueryData(). Do NOT hand-roll fetches with",
+			"  useEffect + useState. Wrap the fetch call (usually callIntegration())",
+			"  in the queryFn.",
+			"Integration calls: use callIntegration() from src/lib/proxy.ts -- as the",
+			"  queryFn body, never on its own in useEffect. Its header comment",
+			"  documents slugs, response unwrapping, pagination, and frontend-only vs",
+			"  HelloLeo Cloud routing.",
 		].join("\n");
 	},
 });