npm - @helloleo/plugins - Versions diffs - 0.1.4 → 0.1.5 - Mend

@helloleo/plugins 0.1.4 → 0.1.5

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 (3) hide show

package/dist/index.js CHANGED Viewed

@@ -12541,7 +12541,263 @@ var RemovePlugin = async () => {
     tool: { remove }
   };
 };
+// src/tools/scaffold.ts
+import { mkdir } from "fs/promises";
+import path2 from "path";
+function packageJson(name) {
+  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"
+    },
+    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) {
+  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, fontFamily, borderRadius) {
+  const fontValue = `'${fontFamily}', ui-sans-serif, system-ui, sans-serif`;
+  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%;
+    --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))
+}`;
+}
+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>,
+)`;
+}
+var 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), and src/main.tsx. " + "Call this FIRST for any new project before writing App.tsx and components.",
+  args: {
+    name: tool.schema.string().optional().describe("Project name for package.json (default: leo-project)"),
+    primaryColor: tool.schema.string().optional().describe('HSL values for primary color, e.g. "221.2 83.2% 53.3%" (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 dir = context.directory;
+    const name = args.name ?? "leo-project";
+    const primary = args.primaryColor ?? "221.2 83.2% 53.3%";
+    const font = args.fontFamily ?? "Inter";
+    const radius = args.borderRadius ?? "0.5rem";
+    await mkdir(path2.join(dir, "src", "lib"), { recursive: true });
+    const files = [
+      ["package.json", packageJson(name)],
+      ["index.html", indexHtml(font)],
+      ["vite.config.js", viteConfig()],
+      ["tailwind.config.js", tailwindConfig()],
+      ["postcss.config.js", postcssConfig()],
+      [path2.join("src", "index.css"), indexCss(primary, font, radius)],
+      [path2.join("src", "lib", "utils.ts"), utilsTs()],
+      [path2.join("src", "main.tsx"), mainTsx()]
+    ];
+    const created = [];
+    for (const [filePath, content] of files) {
+      await Bun.write(path2.join(dir, filePath), content);
+      created.push(filePath);
+    }
+    return [
+      `Scaffolded ${created.length} files:`,
+      ...created.map((f) => `  - ${f}`),
+      "",
+      "Next: create src/App.tsx with your application code.",
+      "The design system is ready -- use design tokens (bg-primary, text-foreground, etc.)",
+      "and create UI components in src/components/ui/."
+    ].join(`
+`);
+  }
+});
+var ScaffoldPlugin = async () => {
+  return {
+    tool: { scaffold }
+  };
+};
 export {
+  ScaffoldPlugin,
   RemovePlugin,
   InspectHttpPlugin
 };

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@helloleo/plugins",
-  "version": "0.1.4",
+  "version": "0.1.5",
   "description": "OpenCode plugins for HelloLeo",
   "license": "UNLICENSED",
   "type": "module",

package/src/index.ts CHANGED Viewed

@@ -1,6 +1,6 @@
 export { InspectHttpPlugin } from "./tools/inspect-http.ts";
 export { RemovePlugin } from "./tools/remove.ts";
-// export { ScaffoldPlugin } from "./tools/scaffold.ts";
+export { ScaffoldPlugin } from "./tools/scaffold.ts";
 // export { CreatePlanPlugin } from "./tools/create-plan.ts";
 // export { ListPlansPlugin } from "./tools/list-plans.ts";
 // export { ModifyPlanPlugin } from "./tools/modify-plan.ts";