mick-templates 1.0.1 → 1.1.0

package/bin/cli.js

@@ -0,0 +1,28 @@
+#!/usr/bin/env node
+import { spawn } from "child_process";
+import { dirname, join } from "path";
+import { fileURLToPath } from "url";
+
+// Get the directory where this script is located
+const __filename = fileURLToPath(import.meta.url);
+const binDir = dirname(__filename);
+const projectRoot = join(binDir, "..");
+const cliPath = join(projectRoot, "src", "index.tsx");
+
+// Find tsx in node_modules/.bin
+const tsxPath = join(projectRoot, "node_modules", ".bin", "tsx");
+
+// Execute tsx with the TypeScript file
+const child = spawn(tsxPath, [cliPath, ...process.argv.slice(2)], {
+  stdio: "inherit",
+  cwd: process.cwd(),
+});
+
+child.on("exit", (code) => {
+  process.exit(code);
+});
+
+child.on("error", (err) => {
+  console.error("Failed to start CLI:", err.message);
+  process.exit(1);
+});

package/package.json

@@ -1,20 +1,19 @@
 {
   "name": "mick-templates",
-  "version": "1.0.1",
+  "version": "1.1.0",
   "description": "CLI tool for creating projects from templates",
   "bin": {
-    "mick-templates": "cli.tsx"
+    "mick-templates": "bin/cli.js"
   },
   "files": [
     "templates",
-    "cli.tsx"
+    "src",
+    "bin",
+    "ts-to-js-codemod.js"
   ],
   "type": "module",
-  "engines": {
-    "bun": ">=1.0.0"
-  },
   "scripts": {
-    "start": "bun cli.tsx"
+    "start": "bun src/index.tsx"
   },
   "keywords": [
     "cli",
@@ -26,9 +25,14 @@
   "author": "Mick",
   "license": "MIT",
   "dependencies": {
+    "execa": "^9.5.2",
+    "glob": "^10.3.10",
     "ink": "^4.4.1",
     "ink-select-input": "^5.0.0",
-    "react": "^18.2.0"
+    "jscodeshift": "^17.3.0",
+    "picocolors": "^1.1.1",
+    "react": "^18.2.0",
+    "tsx": "^4.21.0"
   },
   "devDependencies": {
     "@types/bun": "latest",

package/src/app.tsx

@@ -0,0 +1,88 @@
+import React, { useState, useEffect } from "react";
+import { readdirSync, existsSync } from "fs";
+import { LanguageSelect } from "./components/LanguageSelect.js";
+import { OverwritePrompt } from "./components/OverwritePrompt.js";
+import { Status } from "./components/Status.js";
+import { createProject, type Language } from "./lib/template.js";
+
+type Step = "language" | "overwrite" | "processing" | "done" | "error";
+
+interface Props {
+  template: string;
+  projectName?: string;
+  language?: Language;
+  skipInstall?: boolean;
+}
+
+export function App({ template, projectName, language: initialLang, skipInstall = false }: Props) {
+  const [step, setStep] = useState<Step>("processing");
+  const [language, setLanguage] = useState<Language | undefined>(initialLang);
+  const [targetDir, setTargetDir] = useState("");
+  const [error, setError] = useState("");
+
+  const needsOverwrite = !projectName && existsSync(process.cwd()) && readdirSync(process.cwd()).length > 0;
+
+  useEffect(() => {
+    // Determine initial step
+    if (!language) {
+      setStep("language");
+      return;
+    }
+
+    if (needsOverwrite && step === "processing") {
+      setStep("overwrite");
+      return;
+    }
+
+    // Don't run if we're waiting for user input
+    if (step === "language" || step === "overwrite") return;
+
+    // Create project
+    runCreate(language, false);
+  }, [language]);
+
+  const runCreate = async (lang: Language, overwrite: boolean) => {
+    setStep("processing");
+    try {
+      const dir = await createProject({
+        template,
+        projectName,
+        language: lang,
+        overwrite,
+        skipInstall,
+      });
+      setTargetDir(dir);
+      setStep("done");
+    } catch (e) {
+      setError(e instanceof Error ? e.message : String(e));
+      setStep("error");
+    }
+  };
+
+  const handleLanguageSelect = (lang: Language) => {
+    setLanguage(lang);
+    if (needsOverwrite) {
+      setStep("overwrite");
+    } else {
+      runCreate(lang, false);
+    }
+  };
+
+  const handleOverwrite = (overwrite: boolean) => {
+    if (!overwrite) {
+      process.exit(0);
+    }
+    runCreate(language!, true);
+  };
+
+  if (step === "language") {
+    return <LanguageSelect onSelect={handleLanguageSelect} />;
+  }
+
+  if (step === "overwrite") {
+    return <OverwritePrompt onSelect={handleOverwrite} />;
+  }
+
+  return <Status status={step} targetDir={targetDir} error={error} />;
+}
+

package/src/components/LanguageSelect.tsx

@@ -0,0 +1,23 @@
+import React from "react";
+import { Box, Text } from "ink";
+import SelectInput from "ink-select-input";
+import type { Language } from "../lib/template.js";
+
+interface Props {
+  onSelect: (lang: Language) => void;
+}
+
+const items = [
+  { label: "TypeScript (recommended)", value: "ts" as Language },
+  { label: "JavaScript", value: "js" as Language },
+];
+
+export function LanguageSelect({ onSelect }: Props) {
+  return (
+    <Box flexDirection="column">
+      <Text>Choose language:</Text>
+      <SelectInput items={items} onSelect={(item) => onSelect(item.value)} />
+    </Box>
+  );
+}
+

package/src/components/OverwritePrompt.tsx

@@ -0,0 +1,22 @@
+import React from "react";
+import { Box, Text } from "ink";
+import SelectInput from "ink-select-input";
+
+interface Props {
+  onSelect: (overwrite: boolean) => void;
+}
+
+const items = [
+  { label: "Overwrite", value: true },
+  { label: "Cancel", value: false },
+];
+
+export function OverwritePrompt({ onSelect }: Props) {
+  return (
+    <Box flexDirection="column">
+      <Text>Directory not empty. What do you want to do?</Text>
+      <SelectInput items={items} onSelect={(item) => onSelect(item.value)} />
+    </Box>
+  );
+}
+

package/src/components/Status.tsx

@@ -0,0 +1,21 @@
+import React from "react";
+import { Text } from "ink";
+
+interface Props {
+  status: "processing" | "done" | "error";
+  targetDir?: string;
+  error?: string;
+}
+
+export function Status({ status, targetDir, error }: Props) {
+  if (status === "error") {
+    return <Text color="red">Error: {error}</Text>;
+  }
+
+  if (status === "done") {
+    return <Text color="green">✓ Project created in {targetDir}</Text>;
+  }
+
+  return <Text color="yellow">Creating project...</Text>;
+}
+

package/src/index.tsx

@@ -0,0 +1,57 @@
+#!/usr/bin/env node
+import React from "react";
+import { render, Box, Text } from "ink";
+import { App } from "./app.js";
+import { listTemplates, type Language } from "./lib/template.js";
+
+const args = process.argv.slice(2);
+
+// Parse arguments
+const positional = args.filter((arg) => !arg.startsWith("--"));
+const [template, projectName] = positional;
+
+const skipInstall = args.includes("--skip-install");
+const langFlag = args.find((arg) => arg.startsWith("--lang="))?.split("=")[1];
+
+// Validate language flag
+const validLangs = ["js", "ts"];
+if (langFlag && !validLangs.includes(langFlag)) {
+  console.error(`Error: Invalid language "${langFlag}". Use "js" or "ts".`);
+  process.exit(1);
+}
+
+// Show usage if no template
+if (!template) {
+  const templates = await listTemplates();
+
+  render(
+    <Box flexDirection="column" padding={1}>
+      <Text color="red" bold>
+        Usage: mick-templates {"<template>"} [name] [--lang=js|ts] [--skip-install]
+      </Text>
+      <Box marginTop={1} flexDirection="column">
+        <Text bold>Available templates:</Text>
+        <Box borderStyle="single" borderColor="gray" marginTop={1} paddingX={1} flexDirection="column">
+          {templates.map((t) => (
+            <Box key={t.name} flexDirection="row">
+              <Text color="cyan" bold>{t.name}</Text>
+              {t.description && <Text color="gray"> - {t.description}</Text>}
+            </Box>
+          ))}
+        </Box>
+      </Box>
+    </Box>
+  );
+  process.exit(1);
+}
+
+// Render app
+render(
+  <App
+    template={template}
+    projectName={projectName}
+    language={langFlag as Language | undefined}
+    skipInstall={skipInstall}
+  />
+);
+

package/src/lib/convert.ts

@@ -0,0 +1,117 @@
+import { readFile, writeFile, rename, rm } from "fs/promises";
+import { glob } from "glob";
+import { join, dirname } from "path";
+import { fileURLToPath } from "url";
+import { execa } from "execa";
+import { getPMX, detectPM } from "./pm.js";
+
+const TS_DEPS = [
+  "typescript",
+  "@types/react",
+  "@types/react-dom",
+  "@types/bun",
+  "@types/node",
+  "typescript-eslint",
+];
+
+/**
+ * Convert a TypeScript project to JavaScript.
+ */
+export async function convertToJS(targetDir: string): Promise<void> {
+  // Remove tsconfig.json
+  await rm(join(targetDir, "tsconfig.json"), { force: true });
+
+  // Rename vite.config.ts -> vite.config.js
+  await renameIfExists(
+    join(targetDir, "vite.config.ts"),
+    join(targetDir, "vite.config.js")
+  );
+
+  // Rename all .tsx -> .jsx
+  const tsxFiles = await glob("**/*.tsx", { cwd: targetDir });
+  for (const file of tsxFiles) {
+    const oldPath = join(targetDir, file);
+    const newPath = oldPath.replace(/\.tsx$/, ".jsx");
+    await rename(oldPath, newPath);
+  }
+
+  // Rename all .ts -> .js
+  const tsFiles = await glob("**/*.ts", { cwd: targetDir });
+  for (const file of tsFiles) {
+    const oldPath = join(targetDir, file);
+    const newPath = oldPath.replace(/\.ts$/, ".js");
+    await rename(oldPath, newPath);
+  }
+
+  // Update HTML files to reference .jsx instead of .tsx
+  await updateHTMLScripts(targetDir);
+
+  // Run jscodeshift on all JS/JSX files to strip types
+  await runCodemod(targetDir);
+
+  // Clean up package.json
+  await cleanPackageJSON(targetDir);
+}
+
+async function renameIfExists(from: string, to: string): Promise<void> {
+  try {
+    await rename(from, to);
+  } catch {
+    // File doesn't exist, ignore
+  }
+}
+
+async function updateHTMLScripts(targetDir: string): Promise<void> {
+  const htmlFiles = await glob("**/*.html", { cwd: targetDir });
+  for (const file of htmlFiles) {
+    const filePath = join(targetDir, file);
+    let content = await readFile(filePath, "utf-8");
+    content = content.replace(/src="([^"]+)\.tsx"/g, 'src="$1.jsx"');
+    content = content.replace(/src="([^"]+)\.ts"/g, 'src="$1.js"');
+    await writeFile(filePath, content);
+  }
+}
+
+async function runCodemod(targetDir: string): Promise<void> {
+  const jsFiles = await glob("**/*.{js,jsx}", { cwd: targetDir });
+  if (jsFiles.length === 0) return;
+
+  const __dirname = dirname(fileURLToPath(import.meta.url));
+  const codemodPath = join(__dirname, "..", "..", "ts-to-js-codemod.js");
+  const pmx = getPMX(detectPM());
+  const [cmd, ...baseArgs] = pmx.split(" ");
+
+  for (const file of jsFiles) {
+    const filePath = join(targetDir, file);
+    await execa(
+      cmd,
+      [...baseArgs, "jscodeshift", "-t", codemodPath, "--parser=tsx", filePath],
+      {
+        cwd: targetDir,
+        stdio: "pipe",
+      }
+    );
+  }
+}
+
+async function cleanPackageJSON(targetDir: string): Promise<void> {
+  const pkgPath = join(targetDir, "package.json");
+  try {
+    const pkg = JSON.parse(await readFile(pkgPath, "utf-8"));
+
+    // Remove TS dependencies
+    for (const dep of TS_DEPS) {
+      delete pkg.dependencies?.[dep];
+      delete pkg.devDependencies?.[dep];
+    }
+
+    // Update build script to remove tsc
+    if (pkg.scripts?.build) {
+      pkg.scripts.build = pkg.scripts.build.replace("tsc -b && ", "");
+    }
+
+    await writeFile(pkgPath, JSON.stringify(pkg, null, 2));
+  } catch {
+    // No package.json, ignore
+  }
+}

package/src/lib/pm.ts

@@ -0,0 +1,95 @@
+import { execa } from "execa";
+import { dirname, join } from "path";
+
+export type PackageManager = "npm" | "yarn" | "pnpm" | "bun" | "deno";
+
+/**
+ * Detect the package manager based on how the CLI was invoked.
+ * Checks npm_config_user_agent first (set by npx/bunx/etc),
+ * then falls back to checking the runtime executable.
+ */
+export function detectPM(): PackageManager {
+  const ua = process.env.npm_config_user_agent || "";
+
+  if (ua.startsWith("bun/")) return "bun";
+  if (ua.startsWith("yarn/")) return "yarn";
+  if (ua.startsWith("pnpm/")) return "pnpm";
+  if (ua.startsWith("deno/")) return "deno";
+  if (ua.startsWith("npm/")) return "npm";
+
+  // Fallback: check runtime executable
+  const runtime = process.argv0.toLowerCase();
+  if (runtime.includes("bun")) return "bun";
+  if (runtime.includes("deno")) return "deno";
+
+  return "npm";
+}
+
+/**
+ * Get the executable path for the package manager.
+ * Uses the runtime path if available for better reliability.
+ */
+function getPMExecutable(pm: PackageManager): string {
+  const runtime = process.argv0;
+
+  // If the runtime matches the PM, use it directly (handles custom paths like ~/.bun/bin/bun)
+  if (pm === "bun" && runtime.toLowerCase().includes("bun")) return runtime;
+  if (pm === "deno" && runtime.toLowerCase().includes("deno")) return runtime;
+
+  return pm;
+}
+
+/**
+ * Get the install command for a package manager.
+ */
+export function getInstallCmd(pm: PackageManager): string[] {
+  const exe = getPMExecutable(pm);
+
+  switch (pm) {
+    case "bun":
+      return [exe, "install"];
+    case "yarn":
+      return [exe, "install"];
+    case "pnpm":
+      return [exe, "install"];
+    case "deno":
+      return [exe, "install"];
+    default:
+      return ["npm", "install"];
+  }
+}
+
+/**
+ * Get the package runner (npx, bunx, etc.) for a package manager.
+ */
+export function getPMX(pm: PackageManager): string {
+  const runtime = process.argv0;
+
+  // For bun, use bunx from the same directory as the runtime
+  if (pm === "bun" && runtime.toLowerCase().includes("bun")) {
+    const bunDir = dirname(runtime);
+    return join(bunDir, "bunx");
+  }
+
+  switch (pm) {
+    case "bun":
+      return "bunx";
+    case "yarn":
+      return "yarn dlx";
+    case "pnpm":
+      return "pnpm dlx";
+    case "deno":
+      return "deno run -A npm:";
+    default:
+      return "npx";
+  }
+}
+
+/**
+ * Run the install command in a directory.
+ */
+export async function install(cwd: string): Promise<void> {
+  const pm = detectPM();
+  const [cmd, ...args] = getInstallCmd(pm);
+  await execa(cmd, args, { cwd, stdio: "inherit" });
+}

package/src/lib/template.ts

@@ -0,0 +1,158 @@
+import { cp, readdir, rm, readFile, writeFile, mkdir, stat } from "fs/promises";
+import { join, resolve, basename, dirname } from "path";
+import { fileURLToPath } from "url";
+import { convertToJS } from "./convert.js";
+import { install } from "./pm.js";
+
+const __dirname = dirname(fileURLToPath(import.meta.url));
+const TEMPLATES_DIR = join(__dirname, "..", "..", "templates");
+
+export type Language = "ts" | "js";
+
+export interface CreateOptions {
+  template: string;
+  projectName?: string;
+  language: Language;
+  overwrite?: boolean;
+  skipInstall?: boolean;
+}
+
+/**
+ * Check if a path exists.
+ */
+async function pathExists(path: string): Promise<boolean> {
+  try {
+    await stat(path);
+    return true;
+  } catch {
+    return false;
+  }
+}
+
+/**
+ * List available templates.
+ */
+export async function listTemplates(): Promise<
+  { name: string; description: string }[]
+> {
+  if (!(await pathExists(TEMPLATES_DIR))) return [];
+
+  const dirs = await readdir(TEMPLATES_DIR, { withFileTypes: true });
+  const templates: { name: string; description: string }[] = [];
+
+  for (const dir of dirs) {
+    if (!dir.isDirectory()) continue;
+
+    let description = "";
+    try {
+      const meta = JSON.parse(
+        await readFile(join(TEMPLATES_DIR, dir.name, "template.json"), "utf-8")
+      );
+      description = meta.description || "";
+    } catch {
+      // No template.json
+    }
+
+    templates.push({ name: dir.name, description });
+  }
+
+  return templates;
+}
+
+/**
+ * Create a project from a template.
+ */
+export async function createProject(opts: CreateOptions): Promise<string> {
+  const {
+    template,
+    projectName,
+    language,
+    overwrite = false,
+    skipInstall = false,
+  } = opts;
+
+  const templatePath = join(TEMPLATES_DIR, template);
+  if (!(await pathExists(templatePath))) {
+    throw new Error(`Template "${template}" not found`);
+  }
+
+  const targetDir = projectName
+    ? resolve(process.cwd(), projectName)
+    : process.cwd();
+
+  // Create or clean directory
+  if (projectName) {
+    // For new projects, ensure directory is completely clean
+    try {
+      // First check if directory exists
+      const exists = await pathExists(targetDir);
+      if (exists) {
+        await rm(targetDir, { recursive: true, force: true });
+        // Wait a bit to ensure deletion is complete
+        await new Promise((resolve) => setTimeout(resolve, 10));
+      }
+    } catch (error) {
+      // If rm fails, try to clean contents instead
+      try {
+        const files = await readdir(targetDir);
+        for (const f of files) {
+          await rm(join(targetDir, f), { recursive: true, force: true });
+        }
+      } catch {
+        // If that also fails, throw the original error
+        throw error;
+      }
+    }
+    await mkdir(targetDir, { recursive: true });
+  } else if (overwrite) {
+    const files = await readdir(targetDir);
+    for (const f of files) {
+      if (f === ".git" || f === "node_modules") continue;
+      await rm(join(targetDir, f), { recursive: true, force: true });
+    }
+  }
+
+  // Copy template
+  await cp(templatePath, targetDir, { recursive: true });
+
+  // Convert to JS if needed
+  if (language === "js") {
+    await convertToJS(targetDir);
+  }
+
+  // Replace project name in files
+  if (projectName) {
+    await replaceProjectName(targetDir, basename(projectName));
+  }
+
+  // Install dependencies
+  if (!skipInstall && (await pathExists(join(targetDir, "package.json")))) {
+    await install(targetDir);
+  }
+
+  return targetDir;
+}
+
+async function replaceProjectName(
+  targetDir: string,
+  name: string
+): Promise<void> {
+  const files = ["index.html", "package.json"];
+
+  for (const file of files) {
+    const filePath = join(targetDir, file);
+    if (!(await pathExists(filePath))) continue;
+
+    let content = await readFile(filePath, "utf-8");
+
+    if (file === "index.html") {
+      content = content.replace(/<title>.*<\/title>/, `<title>${name}</title>`);
+    } else if (file === "package.json") {
+      const pkg = JSON.parse(content);
+      pkg.name = name;
+      content = JSON.stringify(pkg, null, 2);
+    }
+
+    await writeFile(filePath, content);
+  }
+}

package/ts-to-js-codemod.js

@@ -0,0 +1,19 @@
+// Transform TypeScript files to JavaScript
+module.exports = function (fileInfo, api) {
+  const j = api.jscodeshift;
+  const root = j(fileInfo.source);
+
+  // Remove type assertions (as Type)
+  root.find(j.TSAsExpression).forEach((path) => {
+    path.replace(path.node.expression);
+  });
+
+  // Update import declarations from .tsx to .jsx
+  root.find(j.ImportDeclaration).forEach((path) => {
+    if (path.node.source.value && path.node.source.value.endsWith(".tsx")) {
+      path.node.source.value = path.node.source.value.replace(/\.tsx$/, ".jsx");
+    }
+  });
+
+  return root.toSource();
+};

package/cli.tsx

@@ -1,204 +0,0 @@
-#!/usr/bin/env bun
-import { useState, useEffect } from "react";
-import { render, Text, Box } from "ink";
-import SelectInput from "ink-select-input";
-import { cp, readdir, rm, mkdir, readFile, writeFile, stat } from "fs/promises";
-import { existsSync, readdirSync } from "fs";
-import { join, resolve } from "path";
-import { spawn } from "child_process";
-
-const TEMPLATES_DIR = join(import.meta.dir, "templates");
-
-const exec = (cmd: string, args: string[], cwd: string) =>
-  new Promise<void>((res, rej) => {
-    spawn(cmd, args, { cwd, stdio: "inherit" })
-      .on("close", (code) => (code === 0 ? res() : rej()))
-      .on("error", rej);
-  });
-
-const replaceProjectName = async (targetDir: string, projectName: string) => {
-  const files = ["index.html", "package.json"];
-
-  for (const file of files) {
-    const filePath = join(targetDir, file);
-    if (existsSync(filePath)) {
-      const content = await readFile(filePath, "utf-8");
-      const updated = content
-        .replace(/<title>.*<\/title>/, `<title>${projectName}</title>`)
-        .replace(/("name":\s*")[^"]*"/, `$1${projectName}"`)
-        .replace(/vite/g, projectName);
-      await writeFile(filePath, updated);
-    }
-  }
-};
-
-const createProject = async (
-  template: string,
-  projectName?: string,
-  overwrite = false,
-  skipInstall = false
-) => {
-  const templatePath = join(TEMPLATES_DIR, template);
-  const targetDir = projectName
-    ? resolve(process.cwd(), projectName)
-    : process.cwd();
-
-  if (!existsSync(templatePath))
-    throw new Error(`Template "${template}" not found`);
-
-  if (projectName) {
-    await mkdir(targetDir, { recursive: true });
-  } else if (overwrite) {
-    const files = await readdir(targetDir);
-    await Promise.all(
-      files
-        .filter((f) => ![".git", "node_modules"].includes(f))
-        .map((f) => rm(join(targetDir, f), { recursive: true, force: true }))
-    );
-  }
-
-  await cp(templatePath, targetDir, { recursive: true });
-
-  // Replace template placeholders with project name
-  if (projectName) {
-    await replaceProjectName(targetDir, projectName);
-  }
-
-  if (!skipInstall && existsSync(join(targetDir, "package.json"))) {
-    const pm = process.argv[0].includes("bun") ? "bun" : "npm";
-    await exec(pm, ["install"], targetDir);
-  }
-
-  return targetDir;
-};
-
-const App = ({
-  template,
-  projectName,
-  skipInstall = false,
-}: {
-  template: string;
-  projectName?: string;
-  skipInstall?: boolean;
-}) => {
-  const [status, setStatus] = useState<
-    "prompting" | "processing" | "done" | "error"
-  >("processing");
-  const [error, setError] = useState("");
-  const [targetDir, setTargetDir] = useState("");
-
-  useEffect(() => {
-    const needsPrompt =
-      !projectName &&
-      existsSync(process.cwd()) &&
-      readdirSync(process.cwd()).length > 0;
-
-    if (needsPrompt) {
-      setStatus("prompting");
-      return;
-    }
-
-    createProject(template, projectName, false, skipInstall)
-      .then((dir) => {
-        setTargetDir(dir);
-        setStatus("done");
-      })
-      .catch((e) => {
-        setError(e.message);
-        setStatus("error");
-      });
-  }, [template, projectName, skipInstall]);
-
-  const handleOverwrite = (overwrite: boolean) => {
-    setStatus("processing");
-    createProject(template, projectName, overwrite, skipInstall)
-      .then((dir) => {
-        setTargetDir(dir);
-        setStatus("done");
-      })
-      .catch((e) => {
-        setError(e.message);
-        setStatus("error");
-      });
-  };
-
-  if (status === "error") {
-    return <Text color="red">Error: {error}</Text>;
-  }
-
-  if (status === "done") {
-    return <Text color="green">✓ Project created in {targetDir}</Text>;
-  }
-
-  if (status === "prompting") {
-    return (
-      <Box flexDirection="column">
-        <Text>Directory not empty. What do you want to do?</Text>
-        <SelectInput
-          items={[
-            { label: "Overwrite", value: "overwrite" },
-            { label: "Cancel", value: "cancel" },
-          ]}
-          onSelect={({ value }) => {
-            if (value === "overwrite") handleOverwrite(true);
-            else process.exit(0);
-          }}
-        />
-      </Box>
-    );
-  }
-
-  return <Text color="yellow">Processing...</Text>;
-};
-
-const args = process.argv.slice(2);
-const [template, projectName] = args.filter((arg) => !arg.startsWith("--"));
-const skipInstall = args.includes("--skip-install");
-
-if (!template) {
-  const templates = existsSync(TEMPLATES_DIR)
-    ? readdirSync(TEMPLATES_DIR).map((name) => {
-        let description = "";
-        try {
-          const meta = JSON.parse(
-            require("fs").readFileSync(
-              join(TEMPLATES_DIR, name, "template.json"),
-              "utf-8"
-            )
-          );
-          description = meta.description || "";
-        } catch {}
-        return { name, description };
-      })
-    : [];
-
-  render(
-    <Box flexDirection="column" padding={1}>
-      <Text color="red" bold>
-        Usage: mick-templates &lt;template&gt; [name] [--skip-install]
-      </Text>
-      <Box marginTop={1} flexDirection="column">
-        <Text bold>Available templates:</Text>
-        <Box borderStyle="single" borderColor="gray" marginTop={1} paddingX={1}>
-          {templates.map((t, index) => (
-            <Box key={t.name} flexDirection="row">
-              <Text color="cyan" bold>
-                {t.name}
-              </Text>
-              {t.description && <Text color="gray"> - {t.description}</Text>}
-            </Box>
-          ))}
-        </Box>
-      </Box>
-    </Box>
-  );
-  process.exit(1);
-}
-
-render(
-  <App
-    template={template}
-    projectName={projectName}
-    skipInstall={skipInstall}
-  />
-);