feat(tern-cli): migrate scaffolding UX to Ink and normalize framework templates

packages/tern-cli/package.json

@@ -4,20 +4,28 @@
   "description": "Interactive webhook setup wizard for tern",
   "license": "MIT",
   "bin": {
-    "tern": "./dist/index.js"
+    "tern": "./dist/cli.js"
   },
-  "main": "./dist/index.js",
-  "types": "./dist/index.d.ts",
+  "main": "./dist/cli.js",
+  "types": "./dist/cli.d.ts",
   "files": [
     "dist",
     "README.md"
   ],
   "scripts": {
     "build": "tsc -p tsconfig.json",
-    "typecheck": "tsc --noEmit -p tsconfig.json"
+    "typecheck": "tsc --noEmit -p tsconfig.json",
+    "test": "node --test"
   },
   "dependencies": {
-    "@clack/prompts": "latest",
-    "@hookflo/tern-dev": "latest"
-  }
+    "@hookflo/tern-dev": "latest",
+    "ink": "^5.2.1",
+    "react": "^18.3.1",
+    "ink-select-input": "^6.2.0",
+    "ink-spinner": "^5.0.0"
+  },
+  "devDependencies": {
+    "@types/react": "^18.3.12"
+  },
+  "type": "module"
 }

packages/tern-cli/src/cli.tsx

@@ -0,0 +1,80 @@
+#!/usr/bin/env node
+import React, { useState } from 'react'
+import { render, Box, useApp } from 'ink'
+import { Logo } from './ui/Logo.js'
+import { SelectPrompt } from './ui/SelectPrompt.js'
+import { Loading } from './ui/Spinner.js'
+import { Complete } from './ui/Complete.js'
+import { scaffold } from './scaffold.js'
+
+type Step = 'platform' | 'framework' | 'loading' | 'done'
+
+const PLATFORMS = [
+  { label: 'Stripe', value: 'stripe' },
+  { label: 'GitHub', value: 'github' },
+  { label: 'Clerk', value: 'clerk' },
+  { label: 'Dodo Payments', value: 'dodopayments' },
+  { label: 'Shopify', value: 'shopify' },
+  { label: 'Polar', value: 'polar' },
+  { label: 'Other', value: 'other' },
+]
+
+const FRAMEWORKS = [
+  { label: 'Hono', value: 'hono' },
+  { label: 'Next.js', value: 'nextjs' },
+  { label: 'Cloudflare Workers', value: 'cloudflare' },
+  { label: 'Express', value: 'express' },
+]
+
+interface Result {
+  filePath: string
+  envKeys: string[]
+}
+
+const App = () => {
+  const { exit } = useApp()
+  const [step, setStep] = useState<Step>('platform')
+  const [platform, setPlatform] = useState('')
+  const [framework, setFramework] = useState('')
+  const [result, setResult] = useState<Result | null>(null)
+
+  const handlePlatform = ({ value }: { value: string }) => {
+    setPlatform(value)
+    setStep('framework')
+  }
+
+  const handleFramework = async ({ value }: { value: string }) => {
+    setFramework(value)
+    setStep('loading')
+    const res = await scaffold({ platform, framework: value })
+    setResult(res)
+    setStep('done')
+    setTimeout(() => exit(), 100)
+  }
+
+  return (
+    <Box flexDirection="column" paddingX={1}>
+      <Logo />
+      {step === 'platform' && (
+        <SelectPrompt
+          question="Which platform are you integrating?"
+          items={PLATFORMS}
+          onSelect={handlePlatform}
+        />
+      )}
+      {step === 'framework' && (
+        <SelectPrompt
+          question="Which framework?"
+          items={FRAMEWORKS}
+          onSelect={handleFramework}
+        />
+      )}
+      {step === 'loading' && <Loading label="Setting up your webhook handler..." />}
+      {step === 'done' && result && (
+        <Complete filePath={result.filePath} envKeys={result.envKeys} framework={framework} />
+      )}
+    </Box>
+  )
+}
+
+render(<App />)

packages/tern-cli/src/index.ts

@@ -1,63 +1 @@
-#!/usr/bin/env node
-import * as clack from "@clack/prompts";
-import { GRAY, RESET } from "./colors";
-import { createConfig } from "./config";
-import { createHandlerFile, getFilePath, getWebhookPath } from "./files";
-import { installTern } from "./install";
-import { printEnvBox, printLogo } from "./print";
-import { getTemplate } from "./templates";
-import { startTunnel } from "./tunnel";
-import { askQuestions, ENV_VARS, getPlatformLabel } from "./wizard";
-
-/** CLI entrypoint for @hookflo/tern-cli. */
-export async function main(): Promise<void> {
-  printLogo();
-
-  const { platform, framework, action, port } = await askQuestions();
-
-  if (action === "handler") {
-    await installTern();
-    const filePath = getFilePath(framework, platform);
-    const envVar = ENV_VARS[platform];
-    const content = getTemplate(
-      framework,
-      platform,
-      envVar,
-      getPlatformLabel(platform),
-    );
-    await createHandlerFile(filePath, content);
-    if (envVar) printEnvBox(envVar);
-    clack.outro("handler ready · add the env variable above to get started");
-    return;
-  }
-
-  if (action === "tunnel") {
-    const webhookPath = getWebhookPath(platform);
-    createConfig(port, webhookPath, platform, framework);
-    clack.log.step("connecting...");
-    startTunnel(port, webhookPath, getPlatformLabel(platform));
-    return;
-  }
-
-  await installTern();
-  const filePath = getFilePath(framework, platform);
-  const webhookPath = getWebhookPath(platform);
-  const envVar = ENV_VARS[platform];
-  const content = getTemplate(
-    framework,
-    platform,
-    envVar ?? "",
-    getPlatformLabel(platform),
-  );
-  await createHandlerFile(filePath, content);
-  createConfig(port, webhookPath, platform, framework);
-  if (envVar) printEnvBox(envVar);
-  clack.log.step("connecting...");
-  startTunnel(port, webhookPath, getPlatformLabel(platform));
-}
-
-main().catch((err: unknown) => {
-  const message = err instanceof Error ? err.message : String(err);
-  console.error(`\n  ${GRAY}error: ${message}${RESET}\n`);
-  process.exit(1);
-});
+import './cli.js'