procedure-cli 0.1.8 → 0.1.9

package/src/steps/stack-style.tsx

@@ -9,13 +9,149 @@ interface Props {
   onComplete: (answers: Partial<WizardAnswers>) => void;
 }
 
-type Mode = "choosing" | "quickstart" | "advanced";
+type Mode = "quickstart" | "advanced";
 type AdvancedStep = "language" | "framework" | "codeStyle";
 
-const PRESET_OPTIONS = [
-  { label: "TypeScript + Node.js", value: "typescript-node" },
+// ─── Presets ────────────────────────────────────────────────────────────────
+
+interface Preset {
+  label: string;
+  description: string;
+  answers: Partial<WizardAnswers>;
+}
+
+const PRESETS: Record<string, Preset> = {
+  "typescript-node": {
+    label: "TypeScript + Node.js",
+    description: "Best for: CLI tools, backend APIs, npm packages, scripts",
+    answers: {
+      language: "TypeScript",
+      framework: "Node.js",
+      codeStyle: [
+        "TypeScript strict mode, ESM imports",
+        "camelCase for variables, PascalCase for types",
+        "stdlib → external → internal import ordering",
+        "Return errors, don't throw",
+      ],
+      buildCommand: "tsc",
+      testCommand: "node --test",
+      typecheckCommand: "tsc --noEmit",
+      lintCommand: "eslint src/",
+      prCommand: "npm run typecheck && npm run test",
+    },
+  },
+  "nextjs-fullstack": {
+    label: "Next.js Full-Stack",
+    description: "Best for: SaaS apps, marketing sites, SSR/SSG, API routes",
+    answers: {
+      language: "TypeScript",
+      framework: "Next.js",
+      codeStyle: [
+        "TypeScript strict mode",
+        "camelCase for variables, PascalCase for components",
+        "Server components by default, client components only when needed",
+        "Co-locate components with their routes",
+      ],
+      buildCommand: "next build",
+      testCommand: "vitest",
+      typecheckCommand: "tsc --noEmit",
+      lintCommand: "next lint",
+      prCommand: "npm run typecheck && npm run lint",
+    },
+  },
+  "react-spa": {
+    label: "React SPA",
+    description: "Best for: Dashboards, admin panels, SPAs without SSR",
+    answers: {
+      language: "TypeScript",
+      framework: "React",
+      codeStyle: [
+        "TypeScript strict mode",
+        "Functional components only, no class components",
+        "Prefer functional patterns, immutability",
+        "camelCase for variables, PascalCase for components",
+      ],
+      buildCommand: "vite build",
+      testCommand: "vitest",
+      typecheckCommand: "tsc --noEmit",
+      lintCommand: "eslint src/",
+      prCommand: "npm run typecheck && npm run test",
+    },
+  },
+  "python-fastapi": {
+    label: "Python + FastAPI",
+    description: "Best for: AI/ML backends, REST APIs, data services",
+    answers: {
+      language: "Python",
+      framework: "FastAPI",
+      codeStyle: [
+        "Type hints on all functions and class attributes",
+        "Black formatting, 88 char line length",
+        "Pydantic models for request/response schemas",
+        "Return errors explicitly, avoid bare exceptions",
+      ],
+      buildCommand: "python -m py_compile src/",
+      testCommand: "pytest",
+      typecheckCommand: "mypy .",
+      lintCommand: "ruff check .",
+      prCommand: "mypy . && pytest",
+    },
+  },
+  "go-service": {
+    label: "Go HTTP Service",
+    description: "Best for: High-perf APIs, microservices, concurrent workloads",
+    answers: {
+      language: "Go",
+      framework: "net/http",
+      codeStyle: [
+        "gofmt enforced, no exceptions",
+        "Errors are values — always handle, never ignore",
+        "Table-driven tests with t.Run subtests",
+        "Keep interfaces small, accept interfaces return structs",
+      ],
+      buildCommand: "go build ./...",
+      testCommand: "go test ./...",
+      typecheckCommand: "go vet ./...",
+      lintCommand: "golangci-lint run",
+      prCommand: "go vet ./... && go test ./...",
+    },
+  },
+  "react-native-expo": {
+    label: "React Native + Expo",
+    description: "Best for: Cross-platform mobile apps (iOS + Android)",
+    answers: {
+      language: "TypeScript",
+      framework: "React Native",
+      codeStyle: [
+        "TypeScript strict mode",
+        "Functional components with hooks",
+        "StyleSheet.create for styles, no inline objects",
+        "Platform-specific code via Platform.select or .ios.tsx / .android.tsx",
+      ],
+      buildCommand: "expo build",
+      testCommand: "jest",
+      typecheckCommand: "tsc --noEmit",
+      lintCommand: "eslint .",
+      prCommand: "npm run typecheck && npm run test",
+    },
+  },
+};
+
+const QUICKSTART_OPTIONS = [
+  ...Object.entries(PRESETS).map(([value, preset]) => ({
+    label: preset.label,
+    value,
+    description: preset.description,
+  })),
+  {
+    label: "Configure manually →",
+    value: "advanced",
+    description: "Choose languages, frameworks, and code style step by step",
+  },
 ];
 
+// ─── Advanced options ────────────────────────────────────────────────────────
+
 const LANGUAGE_OPTIONS = [
   { label: "TypeScript", value: "TypeScript", description: "Typed JavaScript, strict mode recommended" },
   { label: "JavaScript", value: "JavaScript", description: "Dynamic, runs everywhere" },
@@ -57,83 +193,49 @@ const CODE_STYLE_OPTIONS = [
 function getFrameworkPreselect(languages: string[]): string[] {
   const langSet = new Set(languages.map((l) => l.toLowerCase()));
   const preselect: string[] = [];
-  if (langSet.has("typescript") || langSet.has("javascript")) {
-    preselect.push("Node.js");
-  }
-  if (langSet.has("python")) {
-    preselect.push("Django");
-  }
-  if (langSet.has("ruby")) {
-    preselect.push("Rails");
-  }
+  if (langSet.has("typescript") || langSet.has("javascript")) preselect.push("Node.js");
+  if (langSet.has("python")) preselect.push("Django");
+  if (langSet.has("ruby")) preselect.push("Rails");
   return preselect;
 }
 
-const PRESETS: Record<string, Partial<WizardAnswers>> = {
-  "typescript-node": {
-    language: "TypeScript",
-    framework: "Node.js",
-    codeStyle: [
-      "TypeScript strict mode, ESM imports",
-      "camelCase for variables, PascalCase for types",
-      "stdlib -> external -> internal import ordering",
-      "Return errors, don't throw",
-    ],
-    buildCommand: "npm run build",
-    testCommand: "npm run test",
-    typecheckCommand: "npm run typecheck",
-    lintCommand: "npm run lint",
-  },
-};
+// ─── Component ───────────────────────────────────────────────────────────────
 
 export default function StackStyle({ onComplete }: Props) {
-  const [mode, setMode] = useState<Mode>("choosing");
+  const [mode, setMode] = useState<Mode>("quickstart");
   const [advancedStep, setAdvancedStep] = useState<AdvancedStep>("language");
   const [selectedLanguages, setSelectedLanguages] = useState<string[]>([]);
   const [selectedFrameworks, setSelectedFrameworks] = useState<string[]>([]);
 
-  if (mode === "choosing") {
-    return (
-      <>
-        <GutterLine>
-          <Text bold>Setup mode:</Text>
-        </GutterLine>
-        <GutteredSelect
-          options={[
-            { label: "QuickStart (use a preset)", value: "quickstart" },
-            { label: "Advanced (manual config)", value: "advanced" },
-          ]}
-          onChange={(val) => setMode(val as Mode)}
-        />
-      </>
-    );
-  }
-
+  // ── QuickStart ──
   if (mode === "quickstart") {
     return (
       <>
         <GutterLine>
-          <Text bold>Select a stack preset:</Text>
+          <Text bold>Select a preset:</Text>
         </GutterLine>
         <GutteredSelect
-          options={PRESET_OPTIONS}
+          options={QUICKSTART_OPTIONS}
           onChange={(val) => {
-            const preset = PRESETS[val];
-            if (preset) {
-              onComplete(preset);
+            if (val === "advanced") {
+              setMode("advanced");
+              return;
             }
+            const preset = PRESETS[val];
+            if (preset) onComplete(preset.answers);
           }}
         />
       </>
     );
   }
 
-  // Advanced mode
-  const advStep = advancedStep as AdvancedStep;
-
-  if (advStep === "language") {
+  // ── Advanced ──
+  if (advancedStep === "language") {
     return (
       <>
+        <GutterLine>
+          <Text color={C.overlay1}>Mode: manual configuration</Text>
+        </GutterLine>
         <GutterLine>
           <Text bold>Programming languages:</Text>
         </GutterLine>
@@ -150,7 +252,7 @@ export default function StackStyle({ onComplete }: Props) {
     );
   }
 
-  if (advStep === "framework") {
+  if (advancedStep === "framework") {
     return (
       <>
         <GutterLine>